CODEWITHSUNDEEP
angularangular-cli
user3409988
user3409988

Reputation: 457

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

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?

Upvotes: 15

Views: 20770

Answers (5)

EinArzt
EinArzt

Reputation: 367

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.

Upvotes: 0

Dave C
Dave C

Reputation: 316

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

Upvotes: 4

c_froehlich
c_froehlich

Reputation: 1575

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

Upvotes: 11

Alexei - check Codidact
Alexei - check Codidact

Reputation: 23078

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

Upvotes: 7

Mikeumus
Mikeumus

Reputation: 3878

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:

.

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:

Upvotes: 4

Related Questions