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

Answer 2

Necromancing... I have received the same error without an explicit usage of the compiler, so it took a while to understand what was going on.

When doing lazy loading of some modules, AOT seems to have problems figuring out what are the needed modules as indicated in this thread. The result is that the final build will not include those modules and when they are needed the application will try to compile them on the fly and fail since the compiler is not available.

The solution is provided here and for me it worked like this:

export function getSomeModule() { return SomeModule; }

export const routes: Routes = [
  // some routes here
  { path: "some", loadChildren: "./some/some.module#SomeModule" }
]; 

So, the path to the module is indicated and also AOT will know about SomeModule through the getSomeModule function (which is not used in the code, but helps AOT to include the module).

Answer 3

This happens in @angular/[email protected] when doing a production build (ng build -prod) while using the compiler class in your code.

To replace the compiler you'll want to use "dynamic component creation". See this SO:

• How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

.

---

Also, check if you're importing polyfills.ts

I was able to rid this by comparing my @angular/[email protected] project to a freshly scaffolded CLI project and noticed that polyfills.ts wasn't imported anywhere except in .angular-cli.json

For example, I was importing polyfills.ts in main.ts

import 'polyfills.ts'; // Remove this line
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

---

Polyfill.ts only need be in .angular-cli.json here:

...
  "index": "index.html",
  "main": "main.ts",
  "polyfills": "polyfills.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.app.json",
...

---

Duplicate:

• EXCEPTION: Runtime compiler is not loaded

Answer 4

I had the same error when trying to dynamically generate a ViewChild. This is a slightly different case from lazy loading, but it matches the title of this issue so I'll add my 2 cents here in case it helps anyone.

Since I'm explicitly using the compiler in my code, I need it to be included in the output packages. I did this by simply:

ng build --aot=false --buildOptimizer=false

I know nobody likes turning off the optimizer, but in this case the optimizer is what was causing the problem, by "optimizing out" the compiler.

Note that the output is still minimized/uglified because there is a separate flag if you want to have readable outputs:

ng build --aot=false --buildOptimizer=false --optimization=false