Preloading Strategies in Angular Applications

Preloading strategies in Angular are closely tied to lazy-loaded modules. While lazy loading optimizes initial load time by loading modules only when needed, preloading takes it a step further by loading modules in the background after the initial app load. This ensures faster navigation to routes without compromising the initial load performance.

This post explores preloading strategies in Angular, including default strategies, custom strategies, implementation details, and best practices.

1. Understanding Preloading in Angular

Preloading is a technique that loads lazy-loaded modules after the application has been bootstrapped. The main goal is to improve user experience for routes that are likely to be accessed soon, without delaying the initial render.

In Angular, preloading works seamlessly with the router. Modules are still lazy-loaded, but instead of waiting for the user to navigate, Angular fetches them in the background.

2. Benefits of Preloading

Improved Navigation Speed
Lazy-loaded modules are already loaded when a user navigates, resulting in near-instantaneous transitions.
Better Performance
Initial load is still optimized because preloading happens after the app starts.
Predictable User Experience
Users experience consistent performance across frequently accessed routes.
Optimized Bandwidth Usage
Modules are downloaded in the background, avoiding large upfront bundle sizes.
Scalable Application Structure
Preloading encourages modular architecture without sacrificing performance.

3. Default Preloading Strategies

Angular provides two built-in preloading strategies:

3.1 NoPreloading (Default)

import { RouterModule, Routes, NoPreloading } from '@angular/router';

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }
];

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

Lazy-loaded modules are only loaded on navigation.
This is the default strategy if no preloadingStrategy is specified.

3.2 PreloadAllModules

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

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) },
  { path: 'settings', loadChildren: () => import('./settings/settings.module').then(m => m.SettingsModule) }
];

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

All lazy-loaded modules are preloaded immediately in the background after the app starts.
Improves future navigation speed, especially for frequently visited modules.

4. Creating Custom Preloading Strategies

For more control, Angular allows custom preloading strategies. You can preload only specific modules based on conditions like user roles, network speed, or route metadata.

4.1 Basic Custom Strategy

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

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

4.2 Using Custom Strategy in Routing

const routes: Routes = [
  { 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) }
];

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

dashboard module will be preloaded because data: { preload: true } is set.
settings module will not preload unless navigated to.

5. Conditional Preloading

Custom preloading can be extended with conditions based on network status, user permissions, or feature toggles.

5.1 Example: Preload Only on Fast Connections

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

@Injectable({ providedIn: 'root' })
export class NetworkAwarePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
if (navigator.connection &amp;&amp; navigator.connection.effectiveType !== 'slow-2g') {
  return load();
}
return of(null);  }
}

Ensures background loading does not impact users on slow networks.

6. Combining Preloading with Lazy Loading

Preloading works seamlessly with lazy-loaded modules. For example:

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule), data: { preload: true } },
  { path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule) }
];

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

Lazy loading keeps initial bundle small.
Preloading ensures dashboard module is available immediately when navigated.

7. Preloading with Guards

You can combine route guards with preloading strategies. For example, only preload modules for authenticated users.

@Injectable({ providedIn: 'root' })
export class AuthPreloadingStrategy implements PreloadingStrategy {
  constructor(private authService: AuthService) {}

  preload(route: Route, load: () => Observable<any>): Observable<any> {
if (route.data &amp;&amp; route.data&#91;'preload'] &amp;&amp; this.authService.isLoggedIn()) {
  return load();
}
return of(null);  }
}

8. Preloading and Application Performance

Preloading improves user experience but should be used thoughtfully:

Preload frequently accessed modules to reduce navigation latency.
Avoid preloading large, rarely used modules to save bandwidth.
Combine with lazy loading to optimize both initial load and subsequent navigation.
Analyze performance with Chrome DevTools or Lighthouse to confirm benefits.

9. Advanced Preloading Examples

9.1 Preload Based on User Role

@Injectable({ providedIn: 'root' })
export class RoleBasedPreloading implements PreloadingStrategy {
  constructor(private authService: AuthService) {}

  preload(route: Route, load: () => Observable<any>): Observable<any> {
const roles = route.data &amp;&amp; route.data&#91;'roles'];
if (roles &amp;&amp; roles.includes(this.authService.getUserRole())) {
  return load();
}
return of(null);  }
}

Only preloads modules that the current user is authorized to access.

9.2 Preload with Delay

Sometimes you may want to delay preloading to avoid overloading network resources.

import { delay } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class DelayedPreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
return load().pipe(delay(3000)); // Preload after 3 seconds  }
}

10. Combining Preloading with Optimized Caching

Preloaded modules are stored in browser memory. To make navigation faster:

Enable HTTP caching for lazy-loaded module files.
Combine with Service Workers (PWA) to cache modules for offline access.

11. Using Preloading with Angular CLI

Angular CLI automatically splits lazy-loaded modules into separate chunks. Preloading strategies control when these chunks are downloaded.

Build with optimization:

ng build --prod

Analyze bundles:

npx source-map-explorer dist/main.*.js

Preloaded modules will appear in the chunk files loaded in the background.

12. Best Practices for Preloading Strategies

Use PreloadAllModules cautiously in large apps. Preloading everything may impact bandwidth.
Create custom strategies to preload only essential modules.
Combine with network checks to avoid preloading on slow connections.
Pair with lazy loading to optimize initial bundle size.
Use route data flags to mark modules for preloading selectively.
Test user experience across different network conditions.

13. Example: Full Routing Configuration with Preloading

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomeModule), data: { preload: true } },
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule), data: { preload: true } },
  { path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule) },
  { path: '**', redirectTo: 'home' }
];

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

home and dashboard modules are preloaded.
reports module is lazy-loaded on navigation.