Ich versuche, die gesamte Ausführung einer Angular 2-App auf einen Web-Worker zu verlagern, aber ich habe herausgefunden, dass alle derzeit verfügbaren Beispiele System.js verwenden, und ich versuche dies mit einem WebPack zu tun Projekt (gebaut mit Angular-Cli).

Hat jemand dies getan oder eine Idee, wie dies mit WebPack geschehen soll?

Below ist meine main.ts Bootstrap-Datei:

import './polyfills.ts';


import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';


if (environment.production) {
  enableProdMode();
}

import {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('/app/loader.js');

Myloader.js sieht aus wie das

import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import { AppModule } from './app/';

platformWorkerAppDynamic().bootstrapModule(AppModule);

Und meinapp.module.tsdeklariert@NgModulediesen Weg

import { NgModule } from '@angular/core';
import {WorkerAppModule} from '@angular/platform-webworker';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    WorkerAppModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
 export class AppModule { }

Wenn ich es jedoch starte, erhalte ich die FehlermeldungUncaught SyntaxError: Unerwarteter Token-Import in loader.js: 1.

Das Problem scheint mit dem Webpack und dem Mangel an Importen von @angular-Bibliotheken auf der Webworker-Seite zu tun zu haben, wie von Tamas Gegedus und MathMate vorgeschlagen. Der nächste Schritt besteht darin, die Konfigurationsdatei des Webpacks zu ändern, um alle erforderlichen Bibliotheken für die bereitzustellen Webworker. Ich werde daran arbeiten

----------- UPDATE -----------

Da Angular-Cli keinen Zugriff auf die Datei webpack.config.js bietet, habe ich meine eingefügt und nur geringfügige Änderungen am Code vorgenommen, damit dies funktioniert. Ich habe den zweiten Einstiegspunkt in der Webpack-Konfigurationsdatei erstellt und erhalte die Fehlermeldung VM33: 106 Nicht erfasster Referenzfehler: Fenster ist nicht definiert.

ie @Webpack-Konfigurationsdatei sieht folgendermaßen aus:

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var helpers = require('./config/helpers');


module.exports = {
  entry: {
    'app': ['./src/polyfills.ts', './src/vendor.ts', './src/main.ts'],
    'webworker': ['./src/workerLoader.ts']
  },

  resolve: {
    extensions: ['', '.ts', '.js']
  },

  output: {
    path: helpers.root('dist'),
    publicPath: 'http://localhost:8080/',
    filename: '[name].js'
  },

  devtool: 'cheap-module-eval-source-map',

  module: {
    loaders: [
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader?tsconfig=./src/tsconfig.json', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'file?name=assets/[name].[hash].[ext]'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw'
      }
    ]
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
      excludeChunks: ['webworker']
    }),

    new ExtractTextPlugin('[name].css')
  ]
};

wobei polyfills.ts und vendor.ts polyfills und angle libs enthalten.

Ich habe 2 Einstiegspunkte erstellt, die 2 Ausgaben generieren (app.js und webworker.js).

Mit dem HtmlWebpackPlugin ist das erste in der Datei index.html enthalten, das zweite jedoch nicht.

Wenn index.html enthalten ist, main.ts (in app.js enthalten) heißt und versucht, den Webworker mit der zweiten Ausgabe von webpack (webworker.js) zu booten:

import {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('../webworker.js');

webworker.js wurde von webpack mithilfe des Eintrags workerLoader.ts generiert, der dem vorherigen Eintrag loader.js entspricht, jedoch einige Importe enthält.

ie Datei @ WorkerLoader.ts sieht folgendermaßen aus:

import './polyfills.ts';
import '@angular/core';
import '@angular/common';

import {platformWorkerAppDynamic} from '@angular/platform-webworker-dynamic';
import { AppModule } from './app/';

platformWorkerAppDynamic().bootstrapModule(AppModule);

Ich weiß, dass der Web-Worker wie im folgenden Bild gezeigt generiert wurde, aber wie im Bild gezeigt, erhalte ich den Fehler VM33: 106 Nicht erfasster Referenzfehler: Fenster ist nicht definiert und nichts wird angezeigt, außer der Lademeldung aus index.html.

uf der anderen Seite denke ich, dass die Webpack-Konfiguration in Ordnung ist, denn wenn die App mit Webpack im NO-Webworker-Modus ausgeführt wird, funktioniert sie einwandfre

Im Moment denke ich, dass dieses Problem mit dem Webworker-Bootstrap zusammenhängt, aber ich stecke hier ziemlich fest.

Jede Hilfe wäre dankbar;)