Lazy-Loaded Routes

loadComponent and loadChildren defer downloading code until the user actually visits that route — shrinking the initial bundle.

4 min read Level 2/5 #angular#router#lazy

What you'll learn

Lazy load a single component
Lazy load a group of child routes
See the impact on initial bundle size

The Router supports dynamic import() natively. Move heavy or rarely-visited parts of the app behind loadComponent or loadChildren and the bundler will split them into their own chunks.

Lazy load a single component

export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () =>
      import('./admin/admin.component').then(m => m.AdminComponent),
  },
];

The admin chunk only downloads when a user clicks an admin link.

Lazy load child routes

For a whole section with its own routes, point at a routes file.

// app.routes.ts
export const routes: Routes = [
  {
    path: 'shop',
    loadChildren: () =>
      import('./shop/shop.routes').then(m => m.SHOP_ROUTES),
  },
];

// shop/shop.routes.ts
import { Routes } from '@angular/router';

export const SHOP_ROUTES: Routes = [
  { path: '', loadComponent: () => import('./list.component').then(m => m.ListComponent) },
  { path: ':id', loadComponent: () => import('./detail.component').then(m => m.DetailComponent) },
];

Inspect the bundles

After ng build, look in dist/ — each lazy import becomes its own JS file.

ng build
ls -lh dist/your-app/browser/chunks

For large apps this dramatically improves first-contentful paint. Combine with withPreloading(PreloadAllModules) to fetch lazy chunks in the background after the initial route renders.

Child Routes & Layouts →