Lazy loading is a very useful concept in Angular. It is a process of loading Modules only when you navigate to the route. If you have a large application with numerous routes, you should consider using this concept. It will keep the initial bundle sizes smaller and as a result, the application can be loaded much faster.

Create Angular Application

It is the primary tool which is also a basic building block for all the angular applications. You need to run the following command to install the latest version of Angular CLI
npm install -g @angular/cli

Craete a new angular application with routing:
ng new angular-lazy-load --routing

Navigate to the project root:
cd angular-lazy-load

Create a Module with Routing

Next, we need to create our feature modules with components to navigate to.
To create a new module, execute the following command.

ng generate module home --route homepage --module app.module

The command above will generate a new module called home and homepage as the route path to load the
home component.
In addition, it will add the homepage route inside the Routes array inside this module as the --module options.

Lazy Load with LoadChildren

app-routing.module.ts
Here is the result of our app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { path: 'home', loadChildren: () => import('./home/home.module').then( module => module.HomeModule) },
];
@NgModule({
        imports: [RouterModule.forRoot(routes)],
        exports: [RouterModule]
})
export class AppRoutingModule { }

The loadChildren property is used to specify the module that needs to be lazy-loaded when it is first navigated to.

To demonstrate the functionality of this lazy loading, we need to create 2 more modules called profile and settings.

ng generate module profile--route profile --module app.module
ng generate module settings --route settings--module app.module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [ 
 { path: 'home', loadChildren: () => import('./home/home.module').then( module => module.HomeModule) },
 { path: 'profile', loadChildren: () => import('./profile/profile.module').then( module => module.ProfileModule) },
 { path: 'settings ', loadChildren: () => import('./settings /settings .module').then( module => module.SettingsModule) },
];
@NgModule({
        imports: [RouterModule.forRoot(routes)],
        exports: [RouterModule]
})
export class AppRoutingModule { }  

Set Up the Interface

  We will create a list of modules in app.component.html with hyperlinks to link to each component.

<ul>
 <li> <a routerLink="home">Home</a> </li>
 <li> <a routerLink="profile">Profile</a> </li>
 <li> <a routerLink="settings">Settings</a></li>
</ul>
<router-outlet></router-outlet>

To test the lazy load functionality, you need to open the Chrome dev tool, navigate to the Network tab and see which files have been loaded:

Here you can see Home module is only loading when we are clicking on the specific home route.
Here you can see Profile module is only loading when we are clicking on the specific profile route.
Here you can see Settings module is only loading when we are clicking on the specific Settings route.

Conclusion

In this article, we have learned how to implement lazy loading in an Angular application and how to check its functionality in our browser.
If you think this article was helpful, don’t forget to share it with your friends.