Angular allows us to control the way module preloading is handled.

There are 2 strategies provided by @angular/router: PreloadAllModules and NoPreloading. The latter enabled by default, only preloading lazy modules on demand.

We can override this behavior by providing custom preloading strategy: In the example below we preload all included modules if the connection is good.

import { Observable, of } from 'rxjs';

export class CustomPreloading implements PreloadingStrategy {
  public preload(route: Route, load: () => Observable<any>): Observable<any> {
    return preloadingConnection() ? load() : of(null);
  }
}

const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
  preloadingStrategy: CustomPreloading
});

Note that that the example above would not be very efficient for larger apps, as it'll preload all the modules.

Links

• https://angular.io/api/router/PreloadingStrategy
• https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb
• https://medium.com/@adrianfaciu/custom-preloading-strategy-for-angular-modules-b3b5c873681a
• https://coryrylan.com/blog/custom-preloading-and-lazy-loading-strategies-with-angular