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

概述我正在尝试将Angular 2应用程序的整个执行移动到Web工作者,但我发现现在所有可用的示例都使用System.js,而我正在尝试使用基于WebPack的项目(用angular-cli构建). 有没有人这样做过或者对如何使用WebPack有所了解？ 下面是我的main.ts引导程序文件： import './polyfills.ts';import { enableProdMode } f 我正在尝试将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应用程序全部内容，希望文章能够帮你解决使用WebPack在Web worker中运行Angular 2应用程序所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。