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)

Most upvoted comments

Yes that works ! (it was not working on AOT when it is not proxyfied). To conclude, the solution to load a library module is :

  • Proxify the library module inside a project modul
  • Use the import notation of the module
  • Don’t use an exported function (like AOT service configuration), but directly an arrow function
loadChildren: () => import('./shared/profile-wrapper/profile-wrapper.module')
    .then(m => m.ProfileWrapperModule) 
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ProfileModule } from 'shell'; // From Angular project library

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    ProfileModule
  ]
})
export class ProfileWrapperModule { }

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

loadChildren: () => import('./shared/profile-wrapper/profile-wrapper.module')
    .then(m => m.ProfileWrapperModule) 

Check the lazy loading docs here: https://angular.io/guide/lazy-loading-ngmodules