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.

I've got the exact same error. JIT Build works without issues, but AOT yields this error — friedi
– friedi, Commented May 29, 2018 at 13:01

Josh Werts · Accepted Answer · 2018-05-30 15:32:42Z

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

answered May 30, 2018 at 15:32

Josh Werts

1,4612 gold badges11 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yakov Fain · Accepted Answer · 2018-05-29 10:22:17Z

0

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/

answered May 29, 2018 at 10:22

Yakov Fain

12.4k5 gold badges35 silver badges40 bronze badges

1 Comment

Mazlan Alam Malik Over a year ago

Thank you for sharing you blog. I cannot run ng commands in my project because I did not use the angular CLI to create this application. Thus, to build the application, I have the following files which need to be configured: • tscongif.json •tscongif.aot.json •webpack.config.common.js •webpack.congif.dev.js •webpack.congif.prod.js

friedi · Accepted Answer · 2018-05-30 11:45:30Z

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.

Collectives™ on Stack Overflow

Angular 6 | Webpack Production Build Error

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related