Lazy Loading Routes in Angular

Introduction

In Angular, lazy loading is a powerful feature. Lazy loading means loading the routes on demand. In Angular, this technique is used to load the feature modules when a specific route is activated. It helps us to load the bundles on demand rather than loading the application at once. Loading a full bundle in one shot will lead to performance degradation.  Lazy loading improves the application's performance by reducing the response time. 

Implementing Lazy Loading Routes

Lazy loaded routes must be outside of the root app module. Lazy loaded feature module can be created using Angular CLI. As we have seen feature modules in the previous post. Features modules are powerful Angular concept which is designed for modularity. To organize our code in a better way, these modules are introduced. For bigger applications, we can have many feature modules that specify a particular code and functionality each. This makes our application modular. The logic for one functionality will be segregated completely from another using feature modules.
We can create a feature module using Angular CLI command. We are creating the module name "Customer" for our application as below:

ng generate module Admin

Suppose we have various components in this feature module as well. To implement routing for these components, we will have the routing file for our feature module as well. If we import feature module in our app.module file, then they will be eagerly loaded. So So to make a module lazy-loaded, avoid importing it in the app module.

We have three components in our feature module.
$ ng generate c customer/customer-list
$ ng generate c shop/customer-create
$ ng generate c shop/customer-details

loadChildren in Route Config

import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router";
import { MasterPageComponent } from './components/master-page/master-page.component';

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "admin",
    loadChildren: "./modules/admin/admin.module#AdminModule"
  }
];

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

We need to remove the entry of feature module which we want to lazy load from imports array of app.module.ts file. 

import { Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CustomerListComponent } from './customer-list/customer-list.component';
import { CustomerCreateComponent } from './customer-create/customer-create.component';
import { CustomerDetailsComponent } from './customer/customer-details.component';

export const routes: Routes = [
    { path: '', component: CustomerListComponent},
    { path: 'checkout', component: CustomerCreateComponent},
    { path: 'confirm', component: CustomerDetailsComponent},
];

@NgModule({
 imports:[RouterModule.forChild(routes)],//here we have used forChild() instead of forRoot()
 exports:[RouterModule]
})
export class CustomerRoutingModule { }


Comments