Angular-cli: Error: Runtime compiler is not loaded

Created on 17 Mar 2017 · 20Comments · Source: angular/angular-cli

Bug Report or Feature Request (mark with an `x`)

[x] bug report

Versions.

1.0.0-rc.2

Repro steps.

ng build -prod -e prod

The log given by the failure.

vendor.380a744….bundle.js:218 Error: Runtime compiler is not loaded
    at new Error (native)
    at Error.d (http://localhost:9000/portal/assets/dist/polyfills.a61f849adcea6ec74b69.bundle.js:36:1731)
    at r (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:1410:3338)
    at t.compileModuleAndAllComponentsAsync (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:1417:702)
    at e.ngOnChanges (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:1171229)
    at e.ngDoCheck (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:914180)
    at t.GGjx.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:332790)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.Sqya.t.detectChangesInNestedViews (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:667:780)
    at t.GGjx.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:329907)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.R2h3.t.internalDetectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5542)
    at t.YSmj.t.detectChangesInternal (http://localhost:9000/portal/assets/dist/main.f4b767a4fe115c7bb97e.bundle.js:1:662563)
    at t.R2h3.t.detectChanges (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:653:5749)
    at t.Sqya.t.detectChangesInNestedViews (http://localhost:9000/portal/assets/dist/vendor.380a74466a8bf08fbdda.bundle.js:667:780)

Desired functionality.

App to run with no errors.

Mention any other details that might be useful.

I've taken a lot of time to make sure my app is matching packages and conventions of a fresh cli-rc2 app (ng new) with no luck yet.

Source

mikeumus

👍4

Most helpful comment

I was facing the same Runtime compiler error in AOT production build.
After a nice Saturday of rewriting project step by step I found that the problem was following module load:

export function loadGisModule() {
    return GisModule;
}

export const routes: Routes = [
    {
        path: '',
        component: OsksLayoutComponent,
        children: [
            {
                path: '',
                loadChildren: loadGisModule
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class OsksLayoutRoutingModule { }

Changing module load to usual lazy load fixed the issue.
loadChildren: '../../gis/gis.module#GisModule'

I feel a bit frustrated. The error message is very bizzare. But hey. Fixed. Hope it helps to anybody.

versions>
@angular/angular: 5.0.0
@angular/cli: 1.5.0
typescript: 2.6.1

GeorgeKnap on 4 Nov 2017

👍11

All 20 comments

A production build uses AOT by default which does not use the runtime compiler.
Also, the '-e prod' is unnecessary when '--prod' is used.

clydin on 17 Mar 2017

👍1

@clydin yeah I just thought ng build -prod --prod made less sense. So it there a way to get content hashed file names without the AoT?

I'm trying ng build --prod -aot false but am getting this error in the browser:

polyfills.a61f849….bundle.js:36 Unhandled Promise rejection: Cannot read property 'features' of undefined ; Zone: angular ;

mikeumus on 17 Mar 2017

👍1

@mikeumus has this issue been resolved yet? I'm facing similiar error with ng build --prod

EXCEPTION: Uncaught (in promise): Error: Runtime compiler is not loaded Error: Runtime compiler is not loaded at y (http://localhost:52094/polyfills.bc16906638c50c8e5423.bundle.js:36:2553) at r (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1376:1665) at t.compileModuleAsync (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1383:563) at e.project (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1234:672) at e.XO5T.e._tryNext (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:772:11946) at e.XO5T.e._next (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:772:11848) at e.next (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1059:5149) at e.RRVv.e._subscribe (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:660:9655) at e.t._trySubscribe (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1206:3755) at e.t.subscribe (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1206:3584) at t.XO5T.t.call (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:772:11463) at t.subscribe (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1206:3553) at t.call (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1313:6219) at t.subscribe (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1206:3553) at t.call (http://localhost:52094/vendor.06aeb4c7c3d4cb244ffd.bundle.js:1313:6219)

sorakthunly on 18 Mar 2017

@sorakthunly, it has for me.
This fixed it:

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?

From my Stack Overflow answer here: http://stackoverflow.com/a/42843683/1762493

mikeumus on 18 Mar 2017

@mikeumus Thanks, Mike. There are a lot of answers. Which one of those works for you? Also, is this just a temporary issue for @angular/cli1.0.0-rc.2?

sorakthunly on 19 Mar 2017

@mikeumus will revert back to rc.1 does the trick?

sorakthunly on 19 Mar 2017

I'm not using compiler class but I still have this error occasionally using AngularClass seed. Now I can always reproduce on one machine with Firefox only. Other clients work as expected

sherlock1982 on 13 Jul 2017

@sorakthunly, pardon the tardy response, but going ahead in versions resolved it for me I believe.

@sherlock1982, which version of the CLI are you running for this?

mikeumus on 13 Jul 2017

I was facing the same Runtime compiler error in AOT production build.
After a nice Saturday of rewriting project step by step I found that the problem was following module load:

export function loadGisModule() {
    return GisModule;
}

export const routes: Routes = [
    {
        path: '',
        component: OsksLayoutComponent,
        children: [
            {
                path: '',
                loadChildren: loadGisModule
            }
        ]
    }
];

@NgModule({
    imports: [
        RouterModule.forChild(routes)
    ],
    exports: [
        RouterModule
    ]
})
export class OsksLayoutRoutingModule { }

Changing module load to usual lazy load fixed the issue.
loadChildren: '../../gis/gis.module#GisModule'

I feel a bit frustrated. The error message is very bizzare. But hey. Fixed. Hope it helps to anybody.

versions>
@angular/angular: 5.0.0
@angular/cli: 1.5.0
typescript: 2.6.1

GeorgeKnap on 4 Nov 2017

👍11

@GeorgeKnap I have the same issue. My problem is that I precisely don't want to lazy load. I wonder if I should open an issue about it.

versions:
angular 4.4.6
angular cli 1.4.9

guenam on 25 Nov 2017

👍1

@GeorgeKnap @guenam my problem is exactly same, I had to convert all my modules to lazy loaded modules, i am not sure what the way to load modules with routes in eager way.
Did you open any issue about it?

nagarsuresh on 11 Dec 2017

@snagar78 No I didn't: I had not upgrade to angular 5 yet, waiting for 5.1. Upgraded yesterday so I will test this week to see if the issue has miraculously disappeared or not. I'll report it here.

What angular version are you using btw?

guenam on 11 Dec 2017

The problem exists with 5.1 as well.

I just watched a talk by Deborah on routing and discovered loadChildren for non-lazily routed modules.
https://github.com/DeborahK/MovieHunter-routing.

It's too bad it doesn't work for AOT build.

I don't want to lazy load my module. Here is what I am doing right now:

@NgModule({
  imports: [
    RouterModule.forRoot([]),
    CoreRoutingModule // All routes are set up here
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

dereklin on 26 Dec 2017

Just upgraded to 5.1 and, as @dereklin already indicated, the issue stays.

guenam on 28 Dec 2017

I started working with version 5.2 and the problem is still there.
I can not eager load my module.
I think our best option for now is to play with PreloadingStrategy interface in order to selectively eager load our modules.

I found below link which might be helpful. It resolved my issue for now.

Custom preloading strategy for Angular modules