lazy loading in angular

By default, all the components of angular are loaded at the time of application startup. As we give all component declaration in the main module i.e app.module.ts, therefore, all the declared components in app.module.ts are loaded whenever the application started. which may be the cause of downgrade of application performance and the loading time of the landing page will be increased.

So in view of performance issues lazy loading in angular feature of angular come into the picture. almost all applications using Angular lazy loading. lazy loading is a way of load custom modules dynamically.

How Does Lazy Loading work?

In simple language, I can say that lazy loading is based on the key concept of loading of the component dynamically or loading of the component as per user demand. when application startup all the components are not loaded together rather then some components which are required on application startup are loaded when the user navigates and want it.

let’s take a simple example of Lazy loading

Step1: Create a new angular project.(ng new myfreshproject) (Skip this step if you want to work with pre-created angular project)

Step2: create some new components like HomeComponent and ContactUs component.

ng g c Home

ng g c ContactUs

Step 3: Create a new module to set default routing.

ng g m app-routing –flat

Step 4: Create a new component and a module (for lazy loading configuration ) together

ng g m lazy

ng g c lazy

Step 5: Add the following code into app.routing.module.ts

import { LazyModule } from './lazy/lazy.module';
import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { ContactUsComponent } from './contact-us/contact-us.component';
import {  RouterModule , Routes } from '@angular/router';
import { NotFoundComponent } from './not-found/not-found.component';



const routes: Routes = [
  { path: "", component: HomeComponent },
  { path: 'myhome', component: HomeComponent },
  { path: 'contact', component: ContactUsComponent },
  // Add lazy loaded component as children
  { path: 'lazy1', loadChildren: 'app/lazy/lazy.module#LazyModule' },
  { path: '**', component: NotFoundComponent }
];


export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Step 6: Pass reference of the new module (app.routing) into app.module.ts . Pass reference into Import array of @NgModule

imports: [BrowserModule,FormsModule,routing],

Step 7: Add the following code into the lazy module(lazy.module.ts).

import { Routes , RouterModule} from '@angular/router';
import { routing } from './../app-routing.module';
import { NgModule } from '@angular/core';


import { LazyComponent }   from './lazy.component';

const routes: Routes = [
  {
    // Allways set to empty
    path: '',
    component: LazyComponent
  }
];

@NgModule({
 
  declarations: [LazyComponent],
  imports : [
    // Do not forget to register the child route
  RouterModule.forChild(routes)
  ]
})
export class LazyModule {}

Step 8 : Add the following code into the app.component.html for routes navigation or loading of component

Home
 
Contact

Lazy

Step 9: Run code(ng serve –open)

lazy loading in angular