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配置。