Implementing lazy loading in Angular 19 to improve performance

Introduction
Performance optimization is crucial in modern web applications, especially when dealing with large-scale Angular projects. One of the most effective techniques to enhance performance is lazy loading. Lazy loading allows you to load specific parts of your application only when needed, rather than loading everything upfront. This results in faster initial load times and improved user experience. In this guide, we’ll walk through the steps of implementing lazy loading in Angular 19 to optimize your application’s performance.

Step 1: Understanding Lazy Loading
Lazy loading is a design pattern that involves loading modules only when they are required. Instead of loading the entire application upfront, Angular will load components and modules in the background as the user navigates through the app. This reduces the initial bundle size and accelerates the load time.

In Angular, lazy loading is typically applied at the module level. Modules that are not immediately needed are loaded on-demand via the Angular Router.

Step 2: Setting Up a New Angular Project
Let’s first set up an Angular project. If you already have an Angular project, you can skip this step.

ng new angular-lazy-load-app

Navigate to the project directory:

cd angular-lazy-load-app

Serve the application:

ng serve

- The --route flag tells Angular to configure lazy loading for these modules, and --module app ensures they’re added to the main AppModule.
After running the above commands, Angular automatically sets up the routing for lazy loading in the app-routing.module.ts file.

Step 4: Setting Up Lazy Loading in the Routing Configuration
Open the app-routing.module.ts file and make sure it looks like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then(m => m.AboutModule)
  }
];

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

loadChildren is the key to implementing lazy loading. This syntax ensures that the HomeModule and AboutModule are loaded only when the user navigates to the corresponding routes.

Step 5: Verifying the Modules
Now, ensure that both the HomeModule and AboutModule contain basic components.

Inside the home folder, ensure there's a component called home.component.ts with some basic content:

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

@Component({
  selector: 'app-home',
  template: `<h2>Welcome to the Home Page!</h2>`
})
export class HomeComponent { }

Open your terminal and create a new Angular project:

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

@Component({
  selector: 'app-home',
  template: `<h2>Welcome to the Home Page!</h2>`
})
export class HomeComponent { }

Similarly, inside the about folder, ensure there’s a component called about.component.ts:

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

@Component({
  selector: 'app-about',
  template: `<h2>About Us</h2>`
})
export class AboutComponent { }

Step 6: Testing Lazy Loading
With everything in place, it’s time to test lazy loading in action:

Open the browser and navigate to http://localhost:4200/.
You should see the HomeComponent rendered.
Manually navigate to http://localhost:4200/about.
The AboutComponent should be loaded lazily, and you'll notice that the network requests show that the AboutModule is only fetched when needed.

Step 7: Optimizing the Build
After implementing lazy loading, you can optimize the build to ensure that the bundled application is as small as possible. Run the following command to generate a production build:

ng build --prod

This will apply tree-shaking to remove any unused code and optimize the application further for production.

Conclusion
By implementing lazy loading in Angular 19, you can significantly improve the performance of your application by reducing the initial load time. Lazy loading helps you load only the necessary modules when the user requests them, making your Angular application more efficient and responsive. This practice is especially beneficial for larger applications with many features, ensuring that your users have a smooth experience without waiting for unnecessary content to load.

Implementing lazy loading in Angular 19 to improve performance

Related Tutorials