How do you lazy-load routes/features in Angular?

Question

Accepted Answer

**Lazy loading** defers downloading a feature's code until the user navigates to it, instead of bundling everything into the initial download. This shrinks the initial bundle and speeds up the app's first load.

## Lazy-loading a standalone component (modern)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

The dynamic `import()` tells the build tool to split `AdminComponent` into its own chunk, downloaded only when the user visits `/admin`.

## Lazy-loading a group of routes

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` lazy-loads an entire feature area (all its routes/components) as one chunk — the standard way to split a large app by feature.

## The NgModule-based form (older codebases)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## Why it improves performance

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

Users only download what they actually visit — critical for large enterprise apps with many feature areas, most of which a given user never opens.

## Preloading strategies (best of both)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

Preloading fetches lazy chunks in the background after the app loads, so the initial bundle stays small *and* later navigation feels instant. You can also write custom strategies (e.g. preload only likely-next routes).

## Why it matters

Lazy loading is the primary technique for keeping Angular's initial bundle small as the app grows — essential for the large, multi-feature enterprise apps Angular targets.

Splitting by route/feature (`loadComponent`/`loadChildren`) means faster first loads, and pairing with a preloading strategy gives both a quick start and snappy navigation.

It's a standard, high-impact performance practice in any sizable Angular application.