使用WebPack在Web worker中运行Angular 2应用程序

我正在尝试将Angular 2应用程序的整个执行移动到Web工作者,但我发现现在所有可用的示例都使用System.js,而我正在尝试使用基于WebPack的项目(用angular-cli构建).

有没有人这样做过或者对如何使用WebPack有所了解？

下面是我的main.ts引导程序文件：

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');

我的loader.js看起来像这样：

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

platformWorkerAppDynamic().bootstrapModule(AppModule);

我的app.module.tsis以这种方式声明@NgModulet：

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 { }

但是,当我运行它时,我收到错误Uncaught SyntaxError：loader.js中的意外令牌导入：1.

根据Tamas Gegedus和MathMate的建议,这个问题似乎与webpack和webworker方面缺少@angular libs的导入有关,所以下一步是修改webpack配置文件,以便为webworker提供所有必需的libs .我会继续努力.

———–
UPDATE
———–

由于angular-cli不提供对webpack.config.js文件的访问,因此我已经包含了我的文件,对代码进行了少量更改,因此它可以正常工作.我在webpack配置文件中创建了第二个入口点,我收到错误VM33：106 Uncaught ReferenceError：窗口未定义.

Webpack配置文件如下所示：

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')
      },include: helpers.root('src',loader: 'raw'
      }
    ]
  },plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',excludeChunks: ['webworker']
    }),new ExtractTextPlugin('[name].css')
  ]
};

其中polyfills.ts和vendor.ts分别包含polyfill和angular libs.

我创建了2个入口点,生成2个输出(app.js和webworker.js).

使用HtmlWebpackPlugin,第一个包含在index.html文件中,但不包含在第二个文件中.

当包含index.html时,调用main.ts(包含在app.js中)并尝试使用webpack的第二个输出(webworker.js)引导webworker：

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

webworker.js是由webpack使用workerLoader.ts条目生成的,就像之前的loader.js一样,但包括一些导入.

WorkerLoader.ts文件如下所示：

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

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

platformWorkerAppDynamic().bootstrapModule(AppModule);

我知道已经生成了Web worker,如下图所示,但是如图所示,我收到错误VM33：106 Uncaught ReferenceError：窗口未定义,除了从索引加载消息外没有显示任何内容. HTML.

另一方面,我认为webpack配置是可以的,因为如果在没有webworker模式下使用webpack运行应用程序,它可以正常工作.

现在我认为这个问题与webworker bootstrap有关,但我在这里很困惑.

任何帮助,将不胜感激

使用WebPack在Web worker中运行Angular 2应用程序

相关文章