Error: Runtime compiler is not loaded

[mikeumus]

Bug Report or Feature Request (mark with an 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.

[clydin]

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

[mikeumus]

@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 ;

[sorakthun]

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

[mikeumus]

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

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:

• 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

[sorakthun]

@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?

[sorakthun]

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

[sherlock1982]

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

[mikeumus]

@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?

[GeorgeKnap]

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

[nagarsuresh]

@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?

@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?

[dereklin]

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 { }