← Back to Articles         
What is loadComponent() in Angular?

What is loadComponent() in Angular?

Published on 30 Sep 2026     7 min read Angular
Routing

What is loadComponent() in Angular?

What is it?

loadComponent() is an Angular Router feature used to lazy load a single standalone component when the user navigates to its route.

Instead of loading the component as part of the initial route dependency graph:

import { Products } from './products';

{
  path: 'products',
  component: Products
}

we can lazy load it:

{
  path: 'products',
  loadComponent: () =>
    import('./products')
      .then(m => m.Products)
}

The basic idea is:

component
   ↓
Component is statically referenced


loadComponent
   ↓
Component is dynamically imported
   ↓
Loaded when the route is needed

Full Simple Sample Program

home.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  standalone: true,
  template: `
    <h2>Home Page</h2>
  `
})
export class Home {
}

products.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-products',
  standalone: true,
  template: `
    <h2>Products Page</h2>

    <ul>
      <li>Laptop</li>
      <li>Mobile</li>
      <li>Keyboard</li>
    </ul>
  `
})
export class Products {
}

app.routes.ts

import { Routes } from '@angular/router';
import { Home } from './home';

export const routes: Routes = [
  {
    path: '',
    component: Home
  },
  {
    path: 'products',
    loadComponent: () =>
      import('./products')
        .then(m => m.Products)
  }
];

app.ts

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterLink,
    RouterOutlet
  ],
  template: `
    <h1>My Application</h1>

    <nav>
      <a routerLink="/">Home</a> |
      <a routerLink="/products">Products</a>
    </nav>

    <hr>

    <router-outlet></router-outlet>
  `
})
export class App {
}

app.config.ts

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes)
  ]
};

Explanation

The important code is:

loadComponent: () =>
  import('./products')
    .then(m => m.Products)

Step 1 — User visits

/products

Step 2 — Router finds

{
  path: 'products',
  loadComponent: ...
}

Step 3 — Dynamic import executes

import('./products')

The corresponding lazy chunk can now be loaded.

Step 4 — Get the component

.then(m => m.Products)

Here:

m
↓
Module object returned by import()

m.Products
↓
Products component exported from products.ts

Step 5 — Display it

Angular renders Products inside:

<router-outlet></router-outlet>

So:

User visits /products
        ↓
Router matches products
        ↓
loadComponent()
        ↓
import('./products')
        ↓
Products component loaded
        ↓
<router-outlet>
        ↓
Products displayed

2. What is loadChildren()?

What is it?

loadChildren() is used to lazy load a group of routes.

In modern standalone Angular, this is useful when a feature contains multiple pages.

For example:

Products Feature
│
├── Product List
├── Product Details
├── Add Product
└── Edit Product

Instead of putting all those routes directly in app.routes.ts, we can place them in:

products.routes.ts

and lazy load the entire route configuration using loadChildren().

Full Simple Sample Program

Assume:

app/
│
├── app.routes.ts
│
└── products/
     ├── products.routes.ts
     ├── product-list.ts
     ├── product-details.ts
     └── add-product.ts

product-list.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-product-list',
  standalone: true,
  template: `
    <h2>Product List</h2>

    <ul>
      <li>Laptop</li>
      <li>Mobile</li>
      <li>Keyboard</li>
    </ul>
  `
})
export class ProductList {
}

product-details.ts

import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-product-details',
  standalone: true,
  template: `
    <h2>Product Details</h2>

    <p>Product ID: {{ productId }}</p>
  `
})
export class ProductDetails {

  productId: string | null;

  constructor(private route: ActivatedRoute) {
    this.productId =
      this.route.snapshot.paramMap.get('id');
  }
}

add-product.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-add-product',
  standalone: true,
  template: `
    <h2>Add Product</h2>

    <p>Add Product Form</p>
  `
})
export class AddProduct {
}

products.routes.ts

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

import { ProductList } from './product-list';
import { ProductDetails } from './product-details';
import { AddProduct } from './add-product';

export const PRODUCT_ROUTES: Routes = [
  {
    path: '',
    component: ProductList
  },
  {
    path: 'add',
    component: AddProduct
  },
  {
    path: ':id',
    component: ProductDetails
  }
];

app.routes.ts

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

export const routes: Routes = [
  {
    path: 'products',
    loadChildren: () =>
      import('./products/products.routes')
        .then(m => m.PRODUCT_ROUTES)
  }
];

How Does loadChildren() Work?

The main application only knows:

{
  path: 'products',
  loadChildren: () =>
    import('./products/products.routes')
      .then(m => m.PRODUCT_ROUTES)
}

When the user navigates into the Products feature, Angular loads:

products.routes.ts

which contains:

export const PRODUCT_ROUTES: Routes = [
  { path: '', component: ProductList },
  { path: 'add', component: AddProduct },
  { path: ':id', component: ProductDetails }
];

Angular combines the parent path with those child route paths.

Therefore:

Main Route                 Feature Route

products        +          ''
                               ↓
/products                  ProductList


products        +          add
                               ↓
/products/add              AddProduct


products        +          :id
                               ↓
/products/10               ProductDetails

loadComponent() vs loadChildren()

This is the main interview point.

loadComponent() loadChildren()
Lazy loads one component Lazy loads a group of routes / feature
Best for a single page Best for larger features
Returns a component Returns route configuration or an NgModule
Common with standalone components Common for feature route groups
Simple feature Multi-page feature

Example: loadComponent()

If you only have:

/about

you could use:

{
  path: 'about',
  loadComponent: () =>
    import('./about')
      .then(m => m.About)
}

Think:

/about
   ↓
Load one component

Example: loadChildren()

If Products contains:

/products
/products/add
/products/10
/products/10/edit

then a feature route file is often cleaner:

{
  path: 'products',
  loadChildren: () =>
    import('./products/products.routes')
      .then(m => m.PRODUCT_ROUTES)
}

Think:

/products
    ↓
Load Products route configuration
    ↓
├── List
├── Add
├── Details
└── Edit

What About Older NgModule-Based Angular?

This is important because loadChildren() was also heavily used before standalone Angular.

Previously, it commonly lazy loaded an entire feature NgModule.

{
  path: 'products',
  loadChildren: () =>
    import('./products/products.module')
      .then(m => m.ProductsModule)
}

Then:

AppRoutingModule
       ↓
loadChildren()
       ↓
ProductsModule
       ↓
ProductsRoutingModule
       ↓
RouterModule.forChild(routes)

For example:

const routes: Routes = [
  {
    path: '',
    component: ProductListComponent
  },
  {
    path: ':id',
    component: ProductDetailsComponent
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class ProductsRoutingModule {
}

So you should recognize both forms:

Older NgModule approach

loadChildren: () =>
  import('./products/products.module')
    .then(m => m.ProductsModule)

Modern standalone route approach

loadChildren: () =>
  import('./products/products.routes')
    .then(m => m.PRODUCT_ROUTES)

Key Points

  • Both are Angular Router lazy-loading APIs.
  • loadComponent() is mainly used to lazy load one standalone component.
loadComponent: () =>
  import('./products')
    .then(m => m.Products)
  • loadChildren() is used to lazy load a collection of routes or, in older applications, an NgModule.
loadChildren: () =>
  import('./products/products.routes')
    .then(m => m.PRODUCT_ROUTES)
  • Both commonly use JavaScript dynamic:
import(...)
  • Dynamic imports allow code to be split into chunks that can be loaded when required.
  • Lazy loading can reduce the application's initial JavaScript payload.
  • For a single standalone page, loadComponent() is often sufficient.
  • For a feature with multiple related routes, loadChildren() provides a clean feature-level structure.

Interview Questions and Answers

1. What is loadComponent()?

loadComponent() is an Angular Router feature used to lazy load an individual standalone component when its route is activated.

{
  path: 'products',
  loadComponent: () =>
    import('./products')
      .then(m => m.Products)
}

2. What is loadChildren()?

loadChildren() is used to lazy load a collection of routes or, in NgModule-based applications, a feature module.

{
  path: 'products',
  loadChildren: () =>
    import('./products/products.routes')
      .then(m => m.PRODUCT_ROUTES)
}

3. What is the difference between loadComponent() and loadChildren()?

loadComponent()
      ↓
Lazy load one component


loadChildren()
      ↓
Lazy load a feature's route configuration

4. When should you use loadComponent()?

Use it when a route primarily needs to lazy load a single standalone component.

{
  path: 'about',
  loadComponent: () =>
    import('./about')
      .then(m => m.About)
}

5. When should you use loadChildren()?

Use it when a feature contains multiple related routes.

For example:

/products
/products/add
/products/10
/products/10/edit

These can be organized in a separate products.routes.ts.

6. Can loadChildren() lazy load an NgModule?

Yes. This is common in older/module-based Angular applications:

{
  path: 'products',
  loadChildren: () =>
    import('./products/products.module')
      .then(m => m.ProductsModule)
}

7. Does loadChildren() mean child routes?

Not exactly.

loadChildren() is a lazy-loading API that loads additional route configuration or an NgModule.

The children property defines nested routes directly:

{
  path: 'products',
  component: Products,
  children: [
    {
      path: 'list',
      component: ProductList
    }
  ]
}

They are related to route hierarchy, but they are different concepts.

Interview-ready answer

loadComponent() lazy loads a single standalone component, while loadChildren() lazy loads a collection of routes or, in older NgModule-based applications, a feature module. Both use dynamic imports to support code splitting and reduce the amount of JavaScript required during the application's initial load.

Keep Learning - More From This Category

← Back to Articles