调用 forRoot 时，Angular 延迟加载不起作用

Question

I have a lazy load module which needs to expose providers, so I am using the forRoot convention and returning the following code:

@NgModule({
  imports: [RouterModule.forChild([
    {path: "", component: LazyComponent},
  ])],
  declarations: [LazyComponent],
})
export class LazyModule {
  static forRoot() {
    return {
      ngModule: LazyModule,
      providers: [provider]
    };
  }
}

The problem is when I invoke the forRoot in my app module the lazy load does not work anymore. ( I don't see the separate chunk in my console )

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LazyModule.forRoot() <======== this stops the lazy load module
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

From what I learned it should only make the providers singleton, why it does not work?

Answer 1

As of right now, it's not possible to execute a forRoot (or any other configuration static method of this sort) in a module that will load lazily. The problem here is that such a method returns a ModuleWithProviders while loadChildren requires a NgModuleFactory .

Answer 2

When you import a LazyModule in your AppModule imports array it is not "lazy" anymore. A lazy module should only be referenced in a dedicated RoutingModule .

So if I understood you correctly you would like to share a Service between your LazyModules?

If so remove LazyModule from AppModule and create a SharedModule and move your Service you like to share inside the providers array in SharedModule. Import SharedModule in your AppModule with forRoot and import your SharedModule without forRoot in your LazyModules

Answer 3

I faced a similar issue where I had to lazy load a module with some configurations. So, I came up with this temporary fix.

Lazy Module

    @NgModule({
          imports: [
             RouterModule.forChild([
              {path: "", component: LazyComponent},
             ])],
          declarations: [LazyComponent],
    })
    export class LazyModule {
       // considering the function only handle providers 
       static setDynamicProviders(provider?: any) {
            if(LazyModule && LazyModule.__annotations__ && LazyModule.__annotations__[0]){
            LazyModule.__annotations__[0].providers.push(provider);               
          }
            return LazyModule;
       }
   }

Parent Module

const someService = {
  provide: 'SOME_TOKEN',
  useFactory: (dependecy1) => (//dome something with dependency1)
  deps: [SOME_DEPENDENCY_TOKEN]
}

@NgModule({
 imports: [
    RouterModule.forRoot([
        path: 'lazy',
        loadChildren: ()=>(import('*your path to lazy module*').then(ref => ref.LazyModule.setDynamicProvider(someService)))
    ])
  ]
})

So, I am just modifying the annotations created by @NgModule Decorator. At this stage, Angular does not support lazy loading with static methods that return ModuleWithProviders .

Answer 4

Try below code when we define a module is Lazy RouterModule.forChild:

@NgModule({
  imports: [RouterModule.forChild([
    {path: "", component: LazyComponent},
  ])],
  declarations: [LazyComponent],
})
export class LazyModule { }

But when we load in the parent module, try the below code:

@NgModule({
  declarations: [
    AppComponent,
    HelloComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    RouterModule.forRoot([
     {
         path: '',
         loadChildren: './layout/layout.module#LayoutModule',
         canActivate: [AuthGuard]
     }
    ]) <======== right way to load lazy module
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Note: FullPath is like './moduleFolder/lazy.module#LayoutModule'

LayoutModule is your exported Module Name

Please let me know