Angular Lazy Loading (Angular 20+)

In this tutorial, you will learn about Lazy loading in the Angular 20+ version.

Angular Lazy Loading helps improve application performance when loading the application.

It does not load everything at once. When needed, it will load.

Why Lazy Loading is Important

There are many points below to show why lazy loading is so important.

1. It is used to speed up startup time.

2. It is used to better tree-shaking.

3. It is used to optimize change detection

4. It is used to better performance.

Basic Route-Based Lazy Loading

There is no need NgModule, when we use Standalone Components.

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

export const routes: Routes = [
  {
    path: 'dashboard',
    loadComponent: () =>
      import('./dashboard/dashboard.component')
        .then(c => c.DashboardComponent)
  }
];

Bootstrapping Routes in Angular 20+

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';
import { AppComponent } from './app/app.component';
import { routes } from './app/app.routes';

bootstrapApplication(AppComponent, {
  providers: [provideRouter(routes)]
});

Lazy Loading Multiple Components

Each route loads its component only when visited.

{
  path: 'user',
  loadComponent: () =>
    import('./user/user.component')
      .then(c => c.UserComponent)
}

Lazy Loading Interview Questions

Q 1: Is NgModule required in Angular 20+?

Ans: No

Q 2: What is lazy loading in Angular?

Ans: Angular loads features when needed.

Q 3: Difference between loadComponent and loadChildren?

Ans: loadComponent means load the single component.

loadChildren means group of routes.

Angular Lazy Loading (Angular 20+) – Interview Questions