Lazy Loading in Angular

Lazy Loading a Standalone Component with loadComponent

Modern Angular applications can lazy load a standalone component directly with loadComponent.

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

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

Angular does not need the dashboard component in the initial route bundle. Instead, it requests the component when the user navigates to /dashboard.

Lazy Loading Child Routes with loadChildren

Use loadChildren when a feature contains several related child routes.

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

export const routes: Routes = [
  {
    path: 'reports',
    loadChildren: () =>
      import('./reports/reports.routes')
        .then(r => r.REPORTS_ROUTES)
  }
];

The reports route configuration can then lazy load its own standalone components.

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

export const REPORTS_ROUTES: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./report-list/report-list.component')
        .then(c => c.ReportListComponent)
  },
  {
    path: ':id',
    loadComponent: () =>
      import('./report-details/report-details.component')
        .then(c => c.ReportDetailsComponent)
  }
];

Lazy Loading vs Eager Loading

When Should You Use Lazy Loading?

Lazy loading is particularly useful for large route-level features such as administration panels, reporting areas, account settings, dashboards, and feature-heavy tools.

On the other hand, tiny components used immediately on the first screen should not be split simply because lazy loading is available.

What Is Preloading in Angular?

Preloading provides a middle ground between eager and lazy loading. The first screen can load without a lazy feature, and Angular can then fetch selected lazy route bundles in the background after startup.

This approach can make later navigation feel faster while still keeping the initial route lighter.

How to Verify Lazy Loading

1. Build or run the Angular application.
2. Open browser developer tools.
3. Select the Network panel.
4. Reload the application and note the initial JavaScript files.
5. Navigate to a lazy route.
6. Confirm that an additional route chunk is requested at that moment.

Also review bundle output during production builds. Verification is important because importing lazy feature code elsewhere can accidentally pull it into an eagerly loaded bundle.

Best Practices for Angular Lazy Loading

• Lazy load meaningful route-level features.
• Keep shared code separate from feature-specific code.
• Avoid splitting every small component.
• Use standalone components where they simplify route design.
• Consider preloading for frequently visited lazy routes.
• Measure bundle sizes before and after changes.
• Test navigation on slower devices and networks.
• Keep route guards and resolvers lightweight.

Common Lazy Loading Mistakes

• Lazy loading very small features with no measurable benefit.
• Creating too many tiny chunks.
• Importing a lazy feature through an eagerly loaded dependency.
• Assuming lazy loading automatically improves every performance metric.
• Ignoring the delay on the first visit to a lazy route.
• Failing to measure the production build.

Making Lazy Loading Work for Your Angular App

Lazy Loading in Angular is most effective when route boundaries reflect real application features. Use loadComponent for standalone route components and loadChildren for groups of related routes. Then measure the result rather than assuming that more chunks automatically mean better performance.

For larger applications, thoughtful lazy loading can reduce startup work, keep feature code organised, and provide a smoother experience as the application grows.