角 6 | Webpack 生产构建错误答案

【问题标题】：Angular 6 | Webpack Production Build Error角 6 | Webpack 生产构建错误
【发布时间】：2018-11-07 22:40:56
【问题描述】：

快速分解：

• 将我的 Angular 5 应用程序升级到 Angular 6。 • 安装了 rxjs 6 和 rxjs-compat 6 • 使用Webpack 构建。 • 开发构建工作正常。 • 生产版本产生以下错误：

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

【问题讨论】：

我遇到了完全相同的错误。 JIT Build 可以正常工作，但 AOT 会产生此错误

标签： angular webpack rxjs angular6 tsconfig

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

看起来像 rxjs 错误。尝试在没有 AoT 的情况下构建产品，看看是否有帮助：

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/

【讨论】：

感谢您分享您的博客。我无法在我的项目中运行 ng 命令，因为我没有使用 angular CLI 创建此应用程序。因此，为了构建应用程序，我需要配置以下文件： • tscongif.json •tscongif.aot.json •webpack.config.common.js •webpack.congif.dev.js •webpack.congif.prod .js

【解决方案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 配置。

【讨论】：