Preloading strategies in Angular

Introduction

Preloading strategies help your Angular app load parts of it faster by loading some modules in the background. This makes the app feel quicker when users navigate.

You want to speed up navigation to parts of your app that are not loaded initially.

You want to load some modules quietly after the main app loads to improve user experience.

You want to control which lazy-loaded modules load early and which load later.

You want to reduce waiting time when users click links to different pages.

Syntax

Angular

RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })

Use preloadingStrategy option inside RouterModule.forRoot.

Angular provides built-in strategies like PreloadAllModules and NoPreloading.

Examples

This example preloads all lazy-loaded modules after the app starts.

Angular

import { PreloadAllModules } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

This example disables preloading, so modules load only when needed.

Angular

import { NoPreloading } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: NoPreloading })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

This example shows a custom strategy that preloads only modules marked with data: { preload: true }.

Angular

import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class CustomPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data && route.data['preload'] ? load() : of(null);
  }
}

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })
  ],
  providers: [CustomPreloadingStrategy],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Sample Program

This Angular routing module uses the PreloadAllModules strategy to load all lazy modules after the app starts. This improves user experience by reducing wait time when navigating.

Angular

import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule) },
  { path: 'about', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

// Explanation:
// This routing module sets up two lazy-loaded routes: home and about.
// Using PreloadAllModules means Angular will load both modules in the background after the app starts.
// This makes navigating to 'about' faster because it is already loaded quietly.

// Output:
// When the app starts, the home module loads immediately.
// The about module loads quietly in the background.
// Navigating to '/about' is instant because the module is preloaded.

Important Notes

Preloading does not block the initial app load; it happens in the background.

Use custom preloading to control which modules load early based on your app needs.

Preloading helps especially in apps with many lazy-loaded modules to improve speed.

Summary

Preloading strategies load lazy modules in the background to speed up navigation.

Angular offers built-in strategies like PreloadAllModules and NoPreloading.

You can create custom strategies to preload only specific modules.