Angular Lazy Loading Routes

What is Lazy Loading Routes in Angular?

Lazy loading downloads a route’s code only when the user navigates to it. With standalone components you point loadComponent at a dynamic import; a group of routes uses loadChildren.

Lazy Loading Routes example

// one standalone component
{
  path: 'reports',
  loadComponent: () => import('./reports/reports.component').then(m => m.ReportsComponent),
}

// a group of routes
{
  path: 'admin',
  loadChildren: () => import('./admin/admin.routes').then(m => m.ADMIN_ROUTES),
}

Key points to remember

• It is the highest-impact way to cut the initial bundle in a large Angular app.
• withPreloading(PreloadAllModules) fetches lazy chunks in the background after the app loads.
• Providers can be scoped to a lazy route, giving that feature its own service instances.

Common mistakes with Lazy Loading Routes

• Importing the lazy component at the top of the file as well, which defeats the split entirely.
• Lazy-loading a route users always visit immediately, adding a round trip for nothing.