`loadComponent`

Lazily loads a standalone component for a route on demand.

Since Angular 14+ Spec ↗

Syntax

loadComponent: () => import(...).then(m => m.Component)

Parameters

Name	Type	Required	Description
`loader`	`function`	No	Function returning a promise resolving to a standalone component.

Returns

Promise<Type> — The component class loaded as a separate chunk.

Examples

import { Routes } from '@angular/router';

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

Notes

loadComponent code-splits a single standalone component into its own bundle loaded when the route is matched. Use loadChildren with a routes array to lazy-load a feature's child routes. Pair with provideRouter and a preloading strategy if desired.