2

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 ?

Joffrey K
  • 185
  • 9
  • 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 Dec 07 '19 at 09: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 Dec 07 '19 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: https://github.com/ng-packagr/ng-packagr/issues/1285#issuecomment-527222976. Your shouldn't do lazy-loading in a library in the first place. – JB Nizet Dec 07 '19 at 12:58
  • Of course tanks, but in my case, the result is exactly the same. – Joffrey K Dec 07 '19 at 13:03
  • And why not ? It depends on the context like it's said further https://github.com/ng-packagr/ng-packagr/issues/1285#issuecomment-527829849 – Joffrey K Dec 07 '19 at 13:09
  • First reason: because it isn't supported, and thus won't work unless someone adds support for it. Second reason: because the maintainer of the ng-packgr, part of the Angular team, thinks it's a bad idea. – JB Nizet Dec 07 '19 at 13:12
  • It seems like this a bad approach but they have a solution https://github.com/angular/angular-cli/issues/6373#issuecomment-453006158 I'll answer my post later with a proper example of a wrapped module. – Joffrey K Dec 08 '19 at 22:50

1 Answers1

1

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.

Joffrey K
  • 185
  • 9