Repository navigation
V8.0.0 : loadChildren library module failed : "Error: Runtime compiler is not loaded" on AOT mode #14700
Description
🐞 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
Activity
robinComa commentedon Jun 7, 2019
this is redirected from https://github.com/angular/angular/issues/30905
alan-agius4 commentedon Jun 7, 2019
Hi, thanks for opening this.
This pattern was never really supported and used to work before based on a side-effect which you have in your code. The import for the
SecureGuard.If you want to lazy-load a workspace or node_module library you should use a proxy module. More details about this here: #6373 (comment)
I think it’s best to continue tracking this in the original issue mentioned above.
robinComa commentedon Jun 7, 2019
Ok I put the answer on the other project issue.
You can close this one if you want
angular-automatic-lock-bot commentedon Sep 9, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.