Angular Lazy Loading in aot / prod mode

user_3340372 0
Viewed 870

im using Angular 6 and there are two ways of Lazy Loading modules in Angular:

First Method: Specify path to module as string

{path: 'debug', loadChildren: 'app/global/debug.module/debug.module#DebugModule'},

Second Methode: Specify module as Function Signature

{path: 'login', loadChildren: () => LoginMockModule},

In dev mode buth methods works, but in prod mode the second method gives me the following error: 

ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded Error: Runtime compiler is not loaded

Can someone explain why the second method doesn't work in prod mode. I'd like to use this mode because

  1. It is less error prone because the IDE can check if the Module is imported correctly
  2. It is save to refactor / move the module because the IDE knows that the imported module has moved.

Thanks for your help

angular lazy-loading
1 Answers

That's a recurring issue on the angular-cli Github (GitHub issue link). The problem lies in the AOT use, as the prod mode use AOT by default. You can find this short explanation given by one of the angular-cli developer :

Angular CLI only supports lazy route detection via the loadChildren string syntax, while the repro uses a function instead. Since the lazy route is not detected and compiled via AOT, that error comes up.

So... The only thing left is to hope that it will be fixed in the next releases. In the meantime, the only way will be to use loadChildren.

user_50393160
Related