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

我正试图将Angular 2应用程序的整个执行过程转移到web worker，但我发现现在所有可用的示例都使用System.js，我正试图使用基于web包的项目（使用Angular cli构建）来实现这一点

有人这样做过吗？或者有人对如何使用WebPack这样做有想法吗

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

导入“/polyfills.ts”； 从“@angular/core”导入{enableProdMode}； 从“./environments/environment”导入{environment}； if（环境、生产）{ enableProdMode（）； } 从“@angular/platform webworker”导入{bootstrapWorkerUi}；

---

bootstrapWorkerUi（'/app/loader.js'）正如Tamas Hegedus在评论中提到的，您的webpack包很可能仍然引用loader.js的es6文件

您需要为加载程序脚本创建具有入口点的单独包

如果你共享你的网页配置，那么就更容易知道哪里出了问题

此外，加载程序脚本需要具有所需的多边形填充。你可以加上

导入“core js/es7/reflect”； 导入'zone.js/dist/zone'

我终于解决了这个问题：） 注意：如果您使用Angular CLI 1.0或更高版本生成了项目，您现在可以使用自己的webpack配置文件，这简化了整个过程检查。

在使用自定义webpack配置运行代码后，我意识到错误VM33:106 Uncaught ReferenceError:window not defined是由webpack dev server引起的

我通过以下方式解决了这个问题：

1-进行独立的网页包构建

$：webpack--watch#这将在myProject/dist创建bundes

及

2-使用另一个devserver工具运行，如

$：npm安装simplehttpserver-g
$：simplehttpserver-p 8080 dist/#作为我的网页包包，默认情况下使用该端口包含在index.html中

瞧，错误消失了，它只是工作

应用于angular cli项目的更改：Webpack config 让我总结一下有关原始Angular CLI项目的网页包更改

由于

angular cli

不提供对

webpack.config.js

文件的访问，自定义webpack是使用webworkers的关键，因此我已经包括了我的，在代码中做了一些更改

网页包配置文件如下所示：

var ExtractTextPlugin=require（'extract-text-webpack-plugin'）；
var HtmlWebpackPlugin=require（'html-webpack-plugin'）；
var helpers=require（'./config/helpers'）；
module.exports={
条目：{
“app'：['./src/polyfills.ts'，'./src/vendor.ts'，'./src/main.ts']，
'webworker'：['./src/workerLoader.ts']
},
决心：{
扩展名：['''''.ts'，'.js']
},
输出：{
路径：helpers.root（'dist'），
公共路径：'http://localhost:8080/',
文件名：'[name].js'
},
devtool:“廉价模块评估源映射”，
模块：{
装载机：[
{
测试：/\.ts$/,，
加载程序：['awesome-typescript-loader？tsconfig=./src/tsconfig.json'，'angular2模板加载程序']
},
{
测试：/\.html$/,，
加载器：“html”
},
{
测试：/\（png | jpe？g | gif | svg | woff | woff2 | ttf | eot | ico）$/，
加载器：'file？name=assets/[name].[hash].[ext]'
},
{
测试：/\.css$/,，
排除：helpers.root（'src'，'app'），
加载器：ExtractTextPlugin.extract（'style'，'css？sourceMap'））
},
{
测试：/\.css$/,，
包括：helpers.root（'src'，'app'），
加载器：“原始”
}
]
},
插件：[
新HtmlWebpackPlugin({
模板：“src/index.html”，
excludeChunks:['webworker']
}),
新的ExtractTextPlugin（'[name].css'）
]
};

这意味着您没有在html中引用webpack编译包，而是原始es6文件。当设置为单个线程时，应用程序运行良好（使用典型的引导，并且已经使用webpack），当引入我在代码中反映的更改以便在webworker中运行时，问题出现了。我成功地构建了一个项目并重现了您的问题：到目前为止，我知道有一个对ie shim的引用，它向窗口对象添加了一些内容，从而破坏了运行时。但是，我仍然得到一些css加载器的问题原因-继续调查我也能够通过不使用webpack dev server摆脱“窗口未定义”，但现在我仍然坚持“没有平台位置提供程序”，即使@angular/common CommonModule存在。好吧，我已经认为问题就在这个方向上，但你的评论让它更清楚。问题是angular cli在内部使用webpack，但没有任何webpack.config.js文件。我将了解如何将其与配置文件一起使用，以及如何定义新的入口点，以便在这里保留解决方案。我尝试使用第二个入口点作为加载程序脚本，但现在我在web worker中遇到错误“VM33:106 Uncaught ReferenceError:未定义窗口”。我已更新该问题以共享所有详细信息。我尝试了您的解决方案，但worker中仍然存在“未定义窗口”错误。问题似乎在于，在创建的webworker.js捆绑包中，webpack引用了将自身绑定到UI线程的窗口对象。你能帮我吗？你是使用webpack dev server来运行应用程序吗？我在离开webpack dev server时解决了这个问题。也许你把en webworker.js放在了不该放在那里的东西里。我已经用URL更新了一个使用angular 2 webworkers和webpack的示例repo的响应。可能您可以在那里找到您的响应。@Ced这在移动设备上应该运行得更快：@chliebel我已经创建了一个新的SO，并提供了使用CLI 1.0+的答案，因此您可以利用从

ng eject

创建的网页包配置文件。请在此处查看：