How to Use Preloading Strategy in Angular for Faster Routing

In Angular, you use the preloadingStrategy option in the RouterModule.forRoot() method to specify how lazy-loaded modules should preload. The built-in strategies like PreloadAllModules load all lazy modules after the app starts, improving navigation speed without blocking initial load.

Syntax

The preloadingStrategy is set in the router configuration when importing RouterModule. You can choose from built-in strategies or create a custom one.

• PreloadAllModules: Preloads all lazy-loaded modules after app initialization.
• NoPreloading: Default, does not preload any modules.
• Custom strategies: Implement PreloadingStrategy interface for custom logic.

typescript

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) }
];

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

Example

This example shows how to configure Angular routing to preload all lazy-loaded modules using the PreloadAllModules strategy. It improves user experience by loading modules in the background after the app starts.

typescript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes, PreloadAllModules } from '@angular/router';
import { AppComponent } from './app.component';

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

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Output

App loads normally, then lazy modules 'home' and 'about' preload in the background for faster navigation.

Common Pitfalls

Common mistakes when using preloading strategies include:

• Not importing the correct preloading strategy from @angular/router.
• Forgetting to set preloadingStrategy in RouterModule.forRoot().
• Using PreloadAllModules in very large apps without considering network impact.
• Not using lazy loading properly, so preloading has no effect.

Always test your app's load and navigation performance after enabling preloading.

typescript

/* Wrong: Missing preloadingStrategy option */
RouterModule.forRoot(routes);

/* Right: Adding preloadingStrategy */
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules });

Quick Reference

Preloading Strategy	Description
NoPreloading	Default. Does not preload any lazy modules.
PreloadAllModules	Preloads all lazy modules after app starts.
Custom Strategy	Implement PreloadingStrategy interface for custom logic.

Key Takeaways

Set the preloading strategy in RouterModule.forRoot() to control lazy module loading.

Use PreloadAllModules to load all lazy modules in the background after app start.

Avoid preloading in very large apps without testing network impact.

Ensure your routes use lazy loading to benefit from preloading strategies.

Test navigation speed improvements after enabling preloading.