LazyLoad Module in Angular

Question

I am following this blog for Lazy Lodaing a Module

Everything is fine except the part when it asks me to assign static path for the module to be loaded.

the name of the module will depend on the users choice as i may have a number of modules

how can i assign a variable to loadChildren in routing and how to create this variable just before routing

{ path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }

score 1 · Answer 1 · answered Jul 10 '17 at 05:14

1

If you don't use Ahead of Time compilation you can try passing a function to loadChildren:

{ path: 'lazy', loadChildren: () => 'lazy/lazy.module#' + dynamicModuleName }

answered Jul 10 '17 at 05:14

Daniel Kucal

8,684
6
39
64

Type '() => string' is not assignable to type 'LoadChildren'. – Ankit Raonka Jul 10 '17 at 06:02
Well, it'd be possible if you were using [ng-router-loader](https://github.com/shlomiassaf/ng-router-loader) – Daniel Kucal Jul 10 '17 at 06:07

Max Koretskyi · Answer 2 · 2017-07-17T18:05:38.640

0

One option is to define your custom module loader.

Another option is to use default exports. Since router uses the following code:

  private loadAndCompile(path: string): Promise<NgModuleFactory<any>> {
    let [module, exportName] = path.split(_SEPARATOR);
    if (exportName === undefined) {
      exportName = 'default';
    }

to load a module, you can export default module and don't pass any module name at all:

export default class MyModule {}

edited Jul 17 '17 at 18:05

answered Jul 10 '17 at 05:18

Max Koretskyi

101,079
60
333
488

getting this error, Type '() => string' is not assignable to type 'LoadChildren'. – Ankit Raonka Jul 10 '17 at 06:03
is this the error you're getting with solution or Daniel's? – Max Koretskyi Jul 10 '17 at 06:06
yes. well is thr any other way to lazyLoad my module or even component. I have more that 500 forms, each form is a component i want to load a form on request. So the route of the component will be decided upon users choice – Ankit Raonka Jul 10 '17 at 06:31
create a plunker please – Max Koretskyi Jul 10 '17 at 06:33
till now i have not been able to solve. I am thinking of using ui-router, there i might be able to define path or maybe i will one object to routes array via backend code(text file editting, though i dont know the implications for that. I guess it will cause the server to restart) – Ankit Raonka Jul 13 '17 at 11:38
@AnkitRaonka, ui-router is for angularjs AFAIK – Max Koretskyi Jul 13 '17 at 12:31
thr is ng2-ui-router for angular i guess – Ankit Raonka Jul 13 '17 at 13:09
@yurzui loadChildren takes a string as path and if assign a function it should return a promise – Ankit Raonka Jul 28 '17 at 10:44

LazyLoad Module in Angular

2 Answers2