Lesson 16 / 30

Lazy Loading

Load a route's component only when it's visited.

loadComponent

loadComponent dynamically imports a standalone component, splitting it into its own JS chunk that only loads when the route is visited.

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

Why it matters

Lazy loading keeps the initial bundle small — rarely-visited pages (settings, admin panels) don't slow down the first page load.

Quick check: What is the main benefit of `loadComponent` over a plain `component` route?

  • It skips route parameters
  • It splits the component into a separate chunk loaded on demand
  • It disables the router outlet
Answer

It splits the component into a separate chunk loaded on demand — The component code is only downloaded once the user actually navigates to that route.