Angular 6 | Webpack Production Build Error

Question

quick breakdown:

• Upgraded my Angular 5 application to Angular 6. • Installed rxjs 6 & rxjs-compat 6 • Build using Webpack. • Dev build works fine. • Production build yields the following error:

ERROR in chunk app [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.jshas no id. This should not happen.

Answer 1

This was a webpack bug - I had this issue at webpack 4.10.1. Upgrading to 4.10.2 fixed it.

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

Answer 2

Seems like rxjs bug. Try making a prod build without AoT and see if it helps:

ng build --prod --aot false

In general, I don't use rxjs-compat. Making a clean upgrade from Angular 5 to Angular 6 doesn't take much time. I blogged about it here: https://yakovfain.com/2018/05/16/how-i-migrated-a-dozen-of-projects-to-angular-6/

Answer 3

For some reason it is only working (in my case) if I changed one line of code in the rxjs module (file node_modules/rxjs/package.json).

Changed

"sideEffects": false,

to

"sideEffects": true,

With this change in place also the AOT build is working. I don't know why this change is necessary, because the module loading of rxjs should be without side effects, at least the sideEffects/webpack github issues are closed and I don't found any (open) issues regarding this setting.

Maybe this is a issue when combining angular+AOT+webpack+rxjs?!

Workaround/Solution

As a workaround - as long there is no better solution to this issue - you can add something like this in your package.json:

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

This will replace the problematic sideEffects config of the rxjs module.