Ad

Preload Strategies in Angular


By default, Angular lazy loads modules only when a user navigates to a route that requires them. That’s efficient, but it can also cause a delay on first access. Preloading is a way to improve this. Angular can load lazy-loaded modules in the background after the app is up and running—so that when a user navigates to those routes, the modules are already loaded.

Angular has built-in support for preloading strategies through the RouterModule.

What Is a Preloading Strategy?

A preloading strategy is a way to tell Angular how (or whether) to preload lazy-loaded modules after the app has bootstrapped. It only affects modules defined using the loadChildren syntax in routes.

Preloading doesn’t block the initial rendering of the app. That’s the key benefit: it keeps startup fast but loads other parts of the app in the background.


Built-In Preloading Strategies

Angular provides two built-in strategies:

1. NoPreloading (default)

This is the default if you don't set anything. Lazy-loaded modules are loaded only when the user navigates to them.
ts
RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })


2. PreloadAllModules

This tells Angular to preload all lazy-loaded modules in the background, as soon as possible.
ts
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
Use this if your app doesn’t have too many modules or you want to reduce navigation delays across the board


Custom Preloading Strategies

Sometimes you want more control. For example, preload only some modules, or delay preloading until certain conditions are met (like after login or based on network status).
You can create a custom strategy by implementing the PreloadingStrategy interface:
ts@Injectable({ providedIn: 'root' })
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable>): Observable {
    return route.data?.['preload'] ? load() : of(null);
  }
}

In your route config:
ts{
  path: 'admin',
  loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
  data: { preload: true }
}

And in your router setup:
ts
RouterModule.forRoot(routes, { preloadingStrategy: SelectivePreloadingStrategy })

This setup preloads only the routes where data: { preload: true } is explicitly set.


When to Use Preloading

Use preloading when:
  • You want faster navigation after initial load
  • Your lazy-loaded modules are small and won’t overwhelm network or memory
  • You're optimizing for perceived performance
Avoid aggressive preloading when:
  • Modules are large and not always needed
  • You’re on bandwidth-constrained environments
  • You want tight control over when resources are loaded
Tags