Skip to main content

Lazy loading a standalone component using the Angular Router

Add a loadComponent property to a Route object to lazy load a component. The value is a function that returns a dynamic import statement that points to an ES module (a .ts file), then resolves to the component class:

app.routes.ts
import { Routes } from "@angular/router";

import { HomeComponent } from "./app/home.component";

export const routes: Routes = [
{
path: "",
pathMatch: "full",
redirectTo: "home",
},
{
path: "home",
component: HomeComponent,
},
{
path: "about",
loadComponent: () => import("./about.component").then((m) => m.AboutComponent),
},
];