angular-cli build prod "Runtime compiler is not loaded”

Question

I did ng build -prod and met a weird error that is _zone_symbol__error :

Error: Uncaught (in promise): Error: Runtime compiler is not loaded Error: Runtime compiler is not loaded at d (http://localhost:4200/polyfills.cd321326a3dfc08ceb46.bund

I am not using the compiler manually in my app. And the weirdest is that the error seems to come from the polyfills. How can i solve this?

Answer 1

In my case it works to disable Ahead-of-Time compilation for the build

ng build -prod --aot=false

This way the source is still packed and uglyfied and Just-in-Time compiler is included.

main.bundle js file is smaller than when using aot compilation but vendor.bundle js increases by approx 1,5 MB.

Edit 2018-07-11

There seem to be two cases:

1) If your project intentionally creates true dynamic components, currently the only way to include the JIT compiler seems to disable AOT for the production build. See https://github.com/angular/angular/issues/11780 for a discussion

2) If your project does not need to create components dynamically and you don't know why the error happens, disabling AOT can be a workaround but beware of the drawbacks. Without AOT you have larger file sizes and it takes longer for the user to start with your application. In this case it may be more appropriate to investigate why the JIT compiler is referenced in the production build.

There are some SO Discussions (AngularCli & AOT: ERROR Error: Runtime compiler is not loaded, Trouble shoot "Runtime compiler is not loaded") around which suggest that lazy loading a third party module which uses 'COMPILER_PROVIDERS' can be the reason for the error. At the time of writing they have no accepted answer though.

For the description of another pitfall when using lazy loading modules see the answer of Alexei in this thread