Angular 8 lazy loading routes from custom library broken at runtime when project build with AOT

Question

I was intent to access some lazy-loaded routes defined in a custom extended library. Everything was alright until I'm wanted to build a production package (AOT active). The build passed, but when I'm trying to reach a route I get this error in the browser's console :

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

I assume that it's related with loadChildren attribute, when I build the lib, ng-packgr failed with new Angular 8 lazy-loading synthaxe, arrow function (it's a known issue https://github.com/ng-packagr/ng-packagr/issues/1285).

Lazy Routes are defined in the custom library like this :

export function getRouteModule() {
  return RouteModule;
}
export const MAIN_APP_ROUTES: Routes = [
{
  path: 'route',
  loadChildren: getRouteModule
},
...
];

Then in my consumer project :

@NgModule({
 imports: [
     BrowserModule,
     LibraryModule,
     RouterModule.forRoot(MAIN_APP_ROUTES, {useHash: true})
 ],
 declarations: [
     AppComponent
 ],
 bootstrap: [AppComponent]
 })
 export class AppModule {
 }

so I tried several synthaxes, the older one combined with Angular library should be great :

{
  path: 'route',
  loadChildren: '@MyLib/route/route.module#RouteModule'
},
...

but it doesn't worked.

Any idea ?

This most probably has nothing to do with lazy loading. Just with the fact that something in your code relies on the runtime compiler to be present. Compile using --aot instead of --prod, and you'll probably have an easier to understand stack trace. — JB Nizet
– JB Nizet, Commented Dec 7, 2019 at 9:02
Sorry I updated my post, this issue is related with Angular library. Indeed it's linked with lazy-loading at runtime. It seems that Angular cannot load Routes from a library without runtime compiler. There are no problems during compilation, so using --aot instead of --prod doesn't help. — Joffrey K
– Joffrey K, Commented Dec 7, 2019 at 12:56
Using --aot, as I said, would help in getting an easier to understand stack trace. Not in fixing the problem. Rea this: github.com/ng-packagr/ng-packagr/issues/…. Your shouldn't do lazy-loading in a library in the first place. — JB Nizet
– JB Nizet, Commented Dec 7, 2019 at 12:58
Of course tanks, but in my case, the result is exactly the same. — Joffrey K
– Joffrey K, Commented Dec 7, 2019 at 13:03
And why not ? It depends on the context like it's said further github.com/ng-packagr/ng-packagr/issues/… — Joffrey K
– Joffrey K, Commented Dec 7, 2019 at 13:09

Joffrey K · Accepted Answer · 2019-12-08 23:15:06Z

As I find earlier in this discussion : https://github.com/angular/angular-cli/issues/6373#issuecomment-453006158

It's not recommanded to manage lazy-loaded module inside an Angular library because it's doesn't realy supported by ng packagr. Moreover, there is a way around this problem. It's possible to use module wrapper as it's explained in this tutorial : https://medium.com/@tomastrajan/why-and-how-to-lazy-load-angular-libraries-a3bf1489fe24

First you have to define a Module in your application that will wrap a module from the library :

import { NgModule } from '@angular/core';
import {RouteModule} from '@MyLib';

@NgModule({
  declarations: [],
  imports: [
   RouteModule
  ]
})
export class RouteWrapperModule { }

Then define the routes like this in your App :

import {Routes} from '@angular/router';

const routes: Routes = [
 // other routes
 {
  path: 'route',
  loadChildren: 'someWhereInTheMainApp/route-wrapper.module#RouteWrapperModule'
 }
];

It'll solve the bug with AOT on runtime.

Collectives™ on Stack Overflow

Angular 8 lazy loading routes from custom library broken at runtime when project build with AOT

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related