How To Use Lazy Loading Routes in Angular

Introduction :

Lazy loading is a technique to only load the modules that the user actually needs right now. This can decrease the initial bundle size and enhance the performance of your application.

Angular loads modules using eager loading by default. This indicates that before the application can be used, all modules must be loaded. While this might be sufficient for many use cases, there might be times when it starts to negatively impact performance.

You will learn how to use lazy loading routes in an Angular application in this post.

Step 1 :

Routes that are loaded slowly must be outside of the root app module. Your lazy loaded features should be in feature modules.

First, let’s use Angular CLI to create a new project with Angular Router:

ng new angular-lazy-loading-example --routing

Then navigate to the new project directory:

cd angular-lazy-loading-example

Let’s create a new feature module:

ng generate module shop --route shop --module app.module

Let’s now add three additional components to our shop feature module:

The first will be a cart component:

ng generate component shop/cart

The second will be a checkout component:

ng generate component shop/checkout

The third will be a confirm component:

ng generate component shop/confirm

All three components will be located in the shop directory.

Step 2 :

In your main routing configuration, you will want to do something like the following:

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

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

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

The loadChildren function, which is new to Angular 8, requires a function to import your lazy-loaded module only when it is required. You can access the module and invoke its class thanks to the dynamic import, which is promise-based.

Step 3 :

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

import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

const routes: Routes = [
  { path: '', component: CartComponent },
  { path: 'checkout', component: CheckoutComponent },
  { path: 'confirm', component: ConfirmComponent },
];

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

And finally, in the feature module itself, you’ll include your routes with RouterModule’s forChild method instead of forRoot:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ShopRoutingModule } from './shop-routing.module';
import { ShopComponent } from './shop.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

@NgModule({
  declarations: [
    ShopComponent,
    CartComponent,
    CheckoutComponent,
    ConfirmComponent,
  ],
  imports: [
    CommonModule,
    ShopRoutingModule
  ]
})
export class ShopModule { }

Now you can use the routerLink directive to navigate to /shop, /shop/checkout, or /shop/confirm and the module will be loaded the first time one of these paths are navigated to.

In your terminal, start the server:

ng serve