Angular 6 | Webpack生成构建错误

Question

快速分解：

•将Angular 5应用程序升级到Angular 6.•安装rxjs 6＆rxjs-compat 6•使用Webpack构建。 •Dev build工作正常。 •生产构建会产生以下错误：

块应用程序中的错误[entry] bundle.js /Users/Usr_Mac/Desktop/Angular/node_modules/@angular/core/fesm5/core.js RuntimeTemplate.moduleId（）：Module / Users / Usr_Mac / Desktop / Angular / node_modules / rxjs /_esm5/internal/Observable.js没有id。 这不应该发生。

Answer 1

这是一个webpack错误 - 我在webpack 4.10.1中遇到了这个问题。 升级到4.10.2修复它。

https://github.com/webpack/webpack/issues/7443

Answer 2

好像rxjs bug。 尝试在没有AoT的情况下进行prod构建，看看它是否有帮助：

ng build --prod --aot false

一般来说，我不使用rxjs-compat。 从Angular 5到Angular 6进行全面升级并不需要花费太多时间。 我在这里写了博客： https ： //yakovfain.com/2018/05/16/how-i-migrated-a-dozen-of-projects-to-angular-6/

Answer 3

出于某种原因，如果我在rxjs模块中更改了一行代码（文件node_modules/rxjs/package.json ），它只能工作（在我的情况下）。

变

"sideEffects": false,

至

"sideEffects": true,

随着这种变化，AOT构建也在发挥作用。 我不知道为什么这个改变是必要的，因为rxjs的模块加载应该没有副作用，至少sideEffects / webpack github问题是关闭的，我没有发现任何关于这个设置的（开放）问题。

也许这是组合angular + AOT + webpack + rxjs的问题？！

解决方法/解决方案

作为一种解决方法 - 只要没有更好的解决方案来解决这个问题 - 你可以在package.json中添加这样的东西：

"scripts": {
  "postinstall": "sed -i -e 's/\"sideEffects\": false,/\"sideEffects\": true,/g' node_modules/rxjs/package.json"
},

这将取代rxjs模块的有问题的sideEffects配置。