How to preload modules in Angular
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Module preloading in Angular optimizes application performance by loading feature modules in the background after initial application load. As the creator of CoreUI with extensive Angular experience since 2014, I’ve implemented preloading strategies in numerous enterprise applications to balance initial load speed with navigation performance. The most effective approach uses Angular’s built-in preloading strategies or custom preloading logic with RouterModule configuration. This pattern ensures fast initial loads while preparing subsequent modules for instant navigation.
Configure module preloading using RouterModule with preloadingStrategy to load modules in the background.
// app-routing.module.ts
import { NgModule } from '@angular/core'
import { RouterModule, Routes, PreloadAllModules } from '@angular/router'
const routes: Routes = [
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)
},
{
path: 'users',
loadChildren: () => import('./users/users.module').then(m => m.UsersModule),
data: { preload: true }
},
{
path: 'reports',
loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule),
data: { preload: false }
}
]
@NgModule({
imports: [RouterModule.forRoot(routes, {
preloadingStrategy: PreloadAllModules
})],
exports: [RouterModule]
})
export class AppRoutingModule {}
// Custom selective preloading strategy
import { Injectable } from '@angular/core'
import { PreloadingStrategy, Route } from '@angular/router'
import { Observable, of } from 'rxjs'
@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)
}
}
This code configures module preloading using either the built-in PreloadAllModules strategy or a custom selective strategy. The PreloadAllModules strategy automatically preloads all lazy-loaded modules after the initial application load. The custom strategy allows fine-grained control, preloading only modules marked with preload: true in their route data.
Best Practice Note:
This is the preloading architecture we implement in CoreUI Angular templates for optimal performance in large applications. Use selective preloading for critical user paths and avoid preloading heavy modules that users rarely access to optimize bandwidth usage.
