Angular lazy load does not work when invoking forRoot

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?

If you import LazyLoad module in eager module then webpack won't create chunk for it — yurzui
– yurzui, Commented Feb 3, 2018 at 20:53
So what you are saying is that I can't get lazy load my modules and use forRoot at the same time? — undefined
– undefined, Commented Feb 3, 2018 at 20:56
You can create separate module that contains only providers and import it — yurzui
– yurzui, Commented Feb 3, 2018 at 20:57

Jandro Rojas · Accepted Answer · 2019-03-22 13:00:00Z

6

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.

answered Mar 22, 2019 at 13:00

Jandro Rojas

2,0021 gold badge15 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saikat Hajra · Accepted Answer · 2020-01-10 19:20:13Z

2

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.

answered Jan 10, 2020 at 19:20

Saikat Hajra

6803 silver badges12 bronze badges

1 Comment

constantant Over a year ago

In case of 13th version you can push a provider as LazyModule['ɵinj'].providers.push(provider)

SplitterAlex · Accepted Answer · 2018-02-03 21:06:33Z

1

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

answered Feb 3, 2018 at 21:06

SplitterAlex

2,8212 gold badges23 silver badges23 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 4, 2018 at 7:45

An Sharma

112 bronze badges

1 Comment

Jandro Rojas Over a year ago

This doesn't answer his question. Where is forRoot mentioned here?

Adrien Dos Reis · Accepted Answer · 2023-05-19 09:57:28Z

0

If a module (let's call it LazyModule) requires some parameters to be provided through forRoot and is imported inside two separate apps (let's call them A and B), we can define two modules (one in each app)

In app A:

@NgModule({
imports: [
    LazyModule.forRoot(aParamFromAppA)
]
})
export class AModule

And in app B :

@NgModule({
imports: [
    LazyModule.forRoot(anotherParamFromAppB)
]
})
export class BModule

It allows us to import both those modules lazily from their app :

loadChildren: () => import('PATH/TO/MODULE/A/AModule.module').then(m => m.AModule)
loadChildren: () => import('PATH/TO/MODULE/B/BModule.module').then(m => m.BModule)

answered May 19, 2023 at 9:57

Adrien Dos Reis

5272 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular lazy load does not work when invoking forRoot

5 Answers 5

Comments

1 Comment

Comments

LayoutModule is your exported Module Name

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

LayoutModule is your exported Module Name

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related