To lazy load a component, let us add a loadComponent property to a Route object.

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),
  },
];