Angular Lazy Loading

Prev Next

Angular Lazy Loading

When you start any angular application. All the NgModules will load whether any module is immediately necessary or not. So by default, loading of NgModule are called eagerly. When you work any large application. you use lot of routes in the application. So it is consider as a lazy loading. To Overcome that problem you can load NgModule as needed. It will help to reduce bundle sizes and decrease load times. In this tutorial, you will see step by step how to impliment lazy loading in application.

Step 1: Craeting an Application

We create creates an application called angularlazyloading and the --routing flag generates a file called app-routing.module.ts. The following CLI command use to create an application and create routing file to define lazy loading lator part of the tutorial.

ng new angularlazyloading --routing

Note: --routing option requires Angular version 8.1 or higher version not in lower version.

TypeScript

Step 2: Craeting a module with routing

In this step you need module with a component to route. The following CLI command use to create a module as named Employee with routing.

ng generate module Employee --route Employee 
--module app.module

The above command create a folder named Employee having the new lazy loadable feature module employee.module.ts. The command automatically declares the EmployeeComponent and imports EmployeeRoutingModule inside the new feature module. --module command option declares by default Employee to route array in app-routing.module.ts.

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

const routes: Routes = [{ path: 'Employee', loadChildren: () => import('./employee/employee.module').then(m => m.EmployeeModule) }];

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

The lazy loading syntax uses loadChildren followed by a function that uses the browser's built-in import(.....)

Step 3: Craeting a new module with routing

Similarly as in step2 you have also created a module named HR.

ng generate module HR --route HR --module app.module

--module command option declares by default Employee to route array in app-routing.module.ts.

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

const routes: Routes = [{ path: 'Employee', loadChildren: () => import('./employee/employee.module').then(m => m.EmployeeModule) }, 
{ path: 'HR', loadChildren: () => import('./hr/hr.module').then(m => m.HRModule) }];

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

The folder structure of both above CLI command looks like that.

TypeScript

Now add the following code to the app.component.html

<h1>
{{title}}
</h1>
<button type="button" routerLink="/Employee">Employee</button>
<button type="button" routerLink="/HR">HR</button>
<button type="button" routerLink="">Home</button>
<router-outlet></router-outlet>

Now Run the application and test it for lazy loading.

TypeScript