我正在尝试将整个Angular 2应用程序的执行移动到Web Worker中，但我发现目前所有可用的示例都使用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.ts这样声明了@NgModule：
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: Unexpected token import in loader.js:1。
问题似乎与webpack有关，在webworker端缺少@angular库的一些导入，正如Tamas Gegedus和MathMate所建议的那样，因此下一步是修改webpack配置文件，以便为webworker提供所有所需的库。我会处理这个问题。
----------- 更新 -----------
由于angular-cli没有提供对webpack.config.js文件的访问，因此我引入了自己的文件，在代码中进行了一些小改动，使其能够工作。我在webpack配置文件中创建了第二个入口点，并出现了错误 VM33:106 Uncaught ReferenceError: window is not defined。
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')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html',
excludeChunks: ['webworker']
}),
new ExtractTextPlugin('[name].css')
]
};其中polyfills.ts和vendor.ts分别包含polyfills和Angular库。
我创建了两个入口点，生成了两个输出（app.js和webworker.js）。
使用HtmlWebpackPlugin时，第一个输出将被包括在index.html文件中，但第二个不会。
当index.html被包含时，main.ts（包含在app.js中）将被调用，并尝试使用webpack的第二个输出（webworker.js）来引导Web Worker：
import {bootstrapWorkerUi} from '@angular/platform-webworker';
bootstrapWorkerUi('../webworker.js');webworker.js是通过使用workerLoader.ts入口由Webpack生成的，类似于先前的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);
另一方面，我认为webpack配置是正确的，因为如果在无 WebWorker 模式下运行应用程序，则可以正常工作。现在我认为这个问题与WebWorker引导有关，但我在这里卡住了。
任何帮助都将不胜感激 ;)