How does Angular 17 handle preloading strategies with lazy-loaded routes?

Angular 17 is improving its routing capabilities with strategies for preloading, lazy-loading modules and other such best practices for optimizing load times and performance.

What is Preloading in Angular?

When using lazy loading, Angular loads feature modules on demand (when the route is accessed). However, this can cause delays. Preloading addresses this by loading these modules in the background after the application is bootstrapped, reducing future navigation delays.

Angular 17 and Preloading Strategies

Angular provides built-in preloading strategies and also allows custom strategies. Here’s how it works in Angular 17:

• No Preloading – Modules are only loaded when the route is visited.
• PreloadAllModules – All lazy modules are loaded after the app is initialized.
• Custom PreloadingStrategy – You define which modules to preload based on your logic (like network condition, user roles, etc.).

How to Use Preloading Strategies?

Directory structure:

app/
│
├── app-routing.module.ts
├── feature/
│ └── feature.module.ts
└── admin/
 └── admin.module.ts

Example: Using PreloadAllModules

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
const routes: Routes = [ { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule), }, { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), }
];
@NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, // All lazy-loaded modules will be preloaded }), ], exports: [RouterModule],
})
export class AppRoutingModule {}

Now, even though feature and admin are lazy-loaded, they’ll be preloaded in the background right after app load.

Custom Preloading Strategy Example

Let’s say you only want to preload modules that have a data: { preload: true } flag.

1. Create a custom strategy:

// 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?.['preload'] ? load() : of(null); }
}

2. Use it in routing module:

// app-routing.module.ts
import { SelectivePreloadingStrategy } from './selective-preloading.strategy';
const routes: Routes = [ { path: 'feature', loadChildren: () => import('./feature/feature.module').then(m => m.FeatureModule), data: { preload: true }, // ✅ Will be preloaded }, { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule), data: { preload: false }, // ❌ Won’t preload }
];
@NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: SelectivePreloadingStrategy, }), ], exports: [RouterModule],
})
export class AppRoutingModule {}

3. Testing Lazy Loading + Preloading

To observe:

• Run ng serve –verbose
• Watch Network tab in DevTools.
• The module chunks should load after app load (with PreloadAllModules) or conditionally (with custom strategy).

Quick Tabular Summary

What are the Angular 17 Tips?

• Combine preloading with Quicklink strategy (from external libs) for link-based preloading.
• Preloading is ideal for frequently visited modules, but not for rarely used admin or settings sections.