Angular Preloading Strategy: What, Why, and How (With Example)

When building Angular apps with lazy loading, we improve performance by loading feature modules only when needed. But there’s a twist: sometimes we want to load certain modules in the background after the app starts, so they’re ready when users navigate to them.

That’s where Angular’s preloading strategies come into play.

What is Preloading in Angular?

Preloading means loading lazy-loaded modules in the background after the app has bootstrapped.

Angular offers:

• NoPreloading (default): Do nothing extra.
• PreloadAllModules: Preloads all lazy-loaded modules.
• Custom Preloading Strategy: Preload selectively based on logic.

Why Use Preloading?

• Improve user experience: pages load instantly when navigated to.
• Optimize performance: spread the loading cost over idle time.
• Control over which modules to preload.

Basic Setup: Lazy Loading

Before using preloading, let’s set up lazy-loaded modules.

Example: Your app-routing.module.ts might look like this:

tsCopyEditconst routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    data: { preload: true } // we'll use this in custom strategy
  },
  {
    path: 'profile',
    loadChildren: () => import('./profile/profile.module').then(m => m.ProfileModule),
    data: { preload: false }
  },
];

Using PreloadAllModules

To preload everything:

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

That’s it! Angular will load all lazy modules after app starts.

Creating a Custom Preloading Strategy

Let’s say we want to preload only routes that explicitly set data: { preload: true }.

Step 1: Create a Custom Strategy

tsCopyEdit// selective-preloading.strategy.ts
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';
import { Injectable } from '@angular/core';

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

Step 2: Provide It in Routing Module

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

Now only modules with data: { preload: true } are preloaded.

Full Working Example

app-routing.module.ts:

tsCopyEditconst routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
    data: { preload: true }
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule),
    data: { preload: false }
  }
];

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

selective-preloading.strategy.ts:

tsCopyEdit@Injectable({ providedIn: 'root' })
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    return route.data?.['preload'] ? load() : of(null);
  }
}

Summary

Pro Tips

• Use custom strategies to balance performance and UX.
• Combine with route guards to delay or cancel preloading.
• Monitor with Chrome DevTools → Network → JS.