Lazy loading standalone components in Angular

Introduction

Lazy loading standalone components helps your app load faster by only loading parts when needed. This saves data and improves user experience.

When you want to speed up the initial load of your Angular app.

When you have large components that are not always needed right away.

When you want to reduce data usage for users on slow connections.

When you want to organize your app into smaller, manageable pieces.

When you want to improve app performance on mobile devices.

Syntax

Angular

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

@Component({
  standalone: true,
  selector: 'app-lazy',
  template: `<h1>Lazy Loaded Component</h1>`,
  imports: [RouterModule]
})
export class LazyComponent {}

// In your routing module
const routes = [
  {
    path: 'lazy',
    loadComponent: () => import('./lazy.component').then(m => m.LazyComponent)
  }
];

Use standalone: true to make a component standalone.

Use loadComponent in routes to lazy load the standalone component.

Examples

This route lazy loads the ProfileComponent only when the user navigates to '/profile'.

Angular

const routes = [
  {
    path: 'profile',
    loadComponent: () => import('./profile.component').then(m => m.ProfileComponent)
  }
];

This is a simple standalone component ready to be lazy loaded.

Angular

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

@Component({
  standalone: true,
  selector: 'app-dashboard',
  template: `<p>Dashboard loaded lazily!</p>`
})
export class DashboardComponent {}

Sample Program

This example shows a main app component with a link. When you click the link, the LazyComponent loads only then. This saves loading time at the start.

Angular

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

@Component({
  standalone: true,
  selector: 'app-root',
  template: `
    <h1>Welcome to Lazy Loading Demo</h1>
    <nav>
      <a routerLink="/lazy" aria-label="Go to lazy component">Go to Lazy Component</a>
    </nav>
    <router-outlet></router-outlet>
  `,
  imports: [RouterOutlet, RouterLink]
})
export class AppComponent {}

@Component({
  standalone: true,
  selector: 'app-lazy',
  template: `<h2>This component was loaded lazily!</h2>`,
})
export class LazyComponent {}

export const routes = [
  {
    path: 'lazy',
    loadComponent: () => import('./lazy.component').then(m => m.LazyComponent)
  }
];

import { bootstrapApplication } from '@angular/platform-browser';

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

Important Notes

Lazy loading works best with standalone components because they don't need modules.

Make sure your lazy loaded component is marked standalone: true.

Use aria-label on links for better accessibility.

Summary

Lazy loading delays loading components until needed, improving app speed.

Standalone components can be lazy loaded using loadComponent in routes.

This technique helps reduce initial load time and data usage.