Angular — Lazy Loading

What is Lazy Loading?

Loading modules/components only when needed, reducing initial bundle size.

Lazy Load Routes

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: () => import('./admin/admin.module')
      .then(m => m.AdminModule)
  },
  {
    path: 'shop',
    loadComponent: () => import('./shop/shop.component')
      .then(m => m.ShopComponent)
  }
];

Preloading

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

Preloading Strategies

Strategy	Description
NoPreloading	Default, no preloading
PreloadAllModules	Preload everything
Custom	Selective preloading

Custom Preloading

export class CustomPreloading implements PreloadingStrategy {
  preload(route: Route, fn: () => Observable<any>): Observable<any> {
    if (route.data?.['preload']) {
      return fn();
    }
    return of(null);
  }
}

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

Benefits

• Faster initial load
• Reduced bundle size
• Better performance
• On-demand loading

Mini Practice

1. Lazy load a module
2. Lazy load a component
3. Add preloading
4. Create custom preloading

Up Next

Continue with State Management — state management patterns.