angular-cli: V8.0.0 : loadChildren library module failed : "Error: Runtime compiler is not loaded" on AOT mode
🐞 bug report
Affected Package
The issue is caused by package @angular/compiler and/or @angular/core and/or @angular/router
Is this a regression?
Yes, the previous version in which this bug was not present was: 7.2.1
Description
I try to load a project library (named shell) as a route “loadChildren”, with 2 différents option :
- loadChildren: () => import(‘shell’).then(m => m.ProfileModule)
- loadChildren: () => ProfileModule
This 2 ways work correctly on dev mode, but failed on AOT builded mode with an error message. And the route is not loaded.
🔬 Minimal Reproduction
ProfileModule (as an angular library named “shell” on the CLI project) :
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ProfileComponent } from './profile/profile.component';
import { TranslateModule } from '../translate/translate.module';
import { GhostModule } from '../ghost/ghost.module';
import { DataModule } from '../data/data.module';
import { ProfileRoutingModule } from './profile-routing.module';
import { ProfileCardComponent } from './profile-card/profile-card.component';
@NgModule({
declarations: [
ProfileComponent,
ProfileCardComponent
],
imports: [
CommonModule,
MatCardModule,
MatListModule,
MatButtonModule,
MatIconModule,
TranslateModule,
FlexLayoutModule,
GhostModule,
DataModule,
ProfileRoutingModule
],
exports: [
ProfileCardComponent
]
})
export class ProfileModule { }
AppRoutingModule (as an angular project from the same CLI project)
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SecureGuard } from 'shell';
import { HomeComponent } from './home/home.component';
export function loadProfile() {
return import('shell').then(m => m.ProfileModule);
}
const routes: Routes = [{
path: '',
canActivate: [SecureGuard],
children: [{
path: '',
component: HomeComponent
}, {
path: 'profile',
loadChildren: loadProfile // Here the error at runtime, the error message appear when I go to /profile
}, {
path: '**',
component: HomeComponent
}]
}];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
🔥 Exception or Error
Uncaught Error: Uncaught (in promise): Error: Runtime compiler is not loaded
Error: Runtime compiler is not loaded
at e.Jr (main.41ff3398f5c3f189c836.js:1)
at t.project (main.41ff3398f5c3f189c836.js:1)
at t._tryNext (main.41ff3398f5c3f189c836.js:1)
at t._next (main.41ff3398f5c3f189c836.js:1)
at t.next (main.41ff3398f5c3f189c836.js:1)
at e._subscribe (main.41ff3398f5c3f189c836.js:1)
at e._trySubscribe (main.41ff3398f5c3f189c836.js:1)
at e.subscribe (main.41ff3398f5c3f189c836.js:1)
at e.call (main.41ff3398f5c3f189c836.js:1)
at e.subscribe (main.41ff3398f5c3f189c836.js:1)
at Z (polyfills.06b93379260cc1d8e708.js:1)
at Z (polyfills.06b93379260cc1d8e708.js:1)
at polyfills.06b93379260cc1d8e708.js:1
at e.invokeTask (polyfills.06b93379260cc1d8e708.js:1)
at Object.onInvokeTask (main.41ff3398f5c3f189c836.js:1)
at e.invokeTask (polyfills.06b93379260cc1d8e708.js:1)
at t.runTask (polyfills.06b93379260cc1d8e708.js:1)
at g (polyfills.06b93379260cc1d8e708.js:1)
at t.invokeTask [as invoke] (polyfills.06b93379260cc1d8e708.js:1)
at m (polyfills.06b93379260cc1d8e708.js:1)
🌍 Your Environment
Angular Version:
Angular CLI: 8.0.1
Node: 12.4.0
OS: darwin x64
Angular: 8.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
... service-worker
Package Version
------------------------------------------------------------
@angular-devkit/architect 0.800.1
@angular-devkit/build-angular 0.800.1
@angular-devkit/build-ng-packagr 0.800.1
@angular-devkit/build-optimizer 0.800.1
@angular-devkit/build-webpack 0.800.1
@angular-devkit/core 8.0.1
@angular-devkit/schematics 8.0.1
@angular/cli 8.0.1
@angular/flex-layout 8.0.0-beta.26
@angular/pwa 0.800.1
@ngtools/json-schema 1.1.0
@ngtools/webpack 8.0.1
@schematics/angular 8.0.1
@schematics/update 0.800.1
ng-packagr 5.2.0
rxjs 6.5.2
typescript 3.4.5
webpack 4.30.0
Anything else relevant? I try to use on different CLI projects a Profile module from a CLI library (all on the same CLI project). This is not possible since angular 8.0.0
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 5
- Comments: 23 (4 by maintainers)
Yes that works ! (it was not working on AOT when it is not proxyfied). To conclude, the solution to load a library module is :
Thanks for support !
Anyone still having this problem, you might be having the same problem as me and I found the answer here:
In summary, I was using backticks rather than single quotes when giving the path to the module I wanted to load.
@robinComa, the following syntax is supported by the AOT compiled
Check the lazy loading docs here: https://angular.io/guide/lazy-loading-ngmodules