15

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?

user3409988
  • 427
  • 2
  • 7
  • 16

5 Answers5

11

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

c_froehlich
  • 1,305
  • 11
  • 13
  • If you disable AOT it start using JIT compilation which add compiler however this is not the right way if bundle size is something you care about. – Andurit Jun 05 '18 at 10:22
  • True. But if you need the JIT compiler in the browser, disabling AOT is the only way I'm aware of. Do you know another solution? – c_froehlich Jun 06 '18 at 17:50
  • +1. I have used this because I receive the error in Angular 5 and it is not clear why (I am not using the compiler class). vendor.bundle.js is indeed much bigger, but if it does not frequently change, the browser will cache it (Chrome dev tools often tells that it reads the file from the disk cache). – Alexei - check Codidact Jul 06 '18 at 20:38
  • Thanks Alexei and Andurit. Your comments made it plain to me that there are at least two scenarios which could lead to the error. I edited my answer accordingly. – c_froehlich Jul 11 '18 at 08:16
  • Thank you @c_froehlich it works for me. I'm using Node 10.15.3 with angular 7. I was using lazy loading but if we build the "ng build --prod" then aot and buildOptimizer is enable by default and it has problem with it. By making the aot and buildOptimizer false in the angular.json production attribute, i have resolved my issue. Thank you for your answer. – Pravin Abhale Feb 27 '21 at 18:50
7

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).

Alexei - check Codidact
  • 22,016
  • 16
  • 145
  • 164
  • Keep the SomeModule import is causing a issue mentioned in [this post](https://github.com/angular/angular-cli/issues/9825#issuecomment-388728694), which makes `ng serve` to fail. Also I have tried using AOT without having the SomeModule imported neither exporting the function and it seems working fine so far. It may worth some more discussion – wctiger Sep 07 '18 at 15:19
4

This happens in @angular/cli@1.0.0-rc.2 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:

.

Also, check if you're importing polyfills.ts

I was able to rid this by comparing my @angular/cli@1.0.0-rc2 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:

Community
  • 1
  • 1
Mikeumus
  • 3,570
  • 9
  • 40
  • 65
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
Dave C
  • 186
  • 1
  • 3
0

For Angular 9+

Because this is the first thing that pops up when searching for this error, I just want to add that this also appears when you're doing:

const routes = [{
    path: '',
    component: ProfileComponent,
    children: [
        {
            path: '',
            loadChildren: () => import('./profile-about/profile-about.module') // .then(m => m.ProfileAboutModule) is missing here
        }
    ]
}];

instead of 

const routes = [{
    path: '',
    component: ProfileComponent,
    children: [
        {
            path: '',
            loadChildren: () => import('./profile-about/profile-about.module').then(m => m.ProfileAboutModule)
        }
    ]
}];

Note the: .then(m => m.ProfileAboutModule)

When the .then(m => m.ProfileAboutModule) is missing, the Angular compiler also throws the Runtime compiler is not loaded error, so watch out for this too.

EinArzt
  • 347
  • 3
  • 11