Angular PreloadAllModules for lazyloaded modules is not working

Question

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.

Answer 1

The issue is caused by module: "commonjs" in tsconfig.json, It should be module: "ESNext".

Found here