Angular Lazy Load Components

Note the 2nd way is the way Angular’s default setup and generated components would get imported. If you know more about how node works and exported code you can simplify like the 1st example below.

some-routes-file.routes.ts

export const routes: Routes = [
  // Component that has export default
  {
    path: "about",
    loadComponent: () => import("./about-page.component"),
  }, // Component that **doesn't** have export default
  {
    path: "projects",
    loadComponent: () => import("./projects-page.component").then((m) => m.ProjectsPageComponent),
  },
]

You can see we save a lot of boiler plate when we keep things simple by having single responsibility files and take care of exporting a default form the file.

You can always export the file as well as make it the default export so you can use it like other imports in the project (if visually this works better for you).

Backlinks