I have successfully implemented lazy loading for my modules Products and Customers, and I am able to see the chunks when I navigate to respective routing.
Now I want the above modules to preload, which can be done simply by adding
{ preloadingStrategy: PreloadAllModules }
But this is not working, The above modules are still loading lazily (chunks are loading when I navigate to respective modules instead of initial load).
This is how Implemented
app.module.ts
@NgModule({
imports: [LazyLoadModule]
})
lazy-load.module.ts
@NgModule({
imports: [RouterModule.forRoot([{
path: 'products',
data: {
preload: false
},
loadChildren: './entities/products/products.module#ProductsModule',
},
{
path: 'customers',
data: {
preload: true
},
loadChildren: './entities/customers/customers.module#CustomersModule',
}], { useHash: true, preloadingStrategy: PreloadAllModules })]
})
However if I add the configuration directly in app.module.ts, then it seems to work(I can see the individual chunks at initial load), But my routing paths are not working.
Update
First I tried with custom preloading strategy like this
preloading-strategy.service.ts
@Injectable()
export class PreloadingStrategyService implements PreloadingStrategy {
preload(route: Route, load: () => Observable<any>) {
console.log('Preloading called');
return route.data && route.data.preload ? load() : of(null);
}
}
lazy-load.module.ts
{ preloadingStrategy: PreloadingStrategyService }
But preload method is never called(No console log printed), So for testing purpose I added PreloadAllModules. This also doesn't work as I already explained above.
