Lazy Loading in Angular 7

By default, NgModules are eagerly loaded i.e. as soon as app loads, so do all the NgModules. But for large apps with many routes, lazy loading is very helpful.

Lazy loading loads the components asynchronously when a specific route is activated or when required. It helps to increase the performance and speed of the application. It splits the app into multiple bundles.

Lazy loading was implemented in the Angular router (@angular/router) to fix this. 

Feature module is that module which you want to download when required.

Below is the step by step example of lazy loading:

1) Create a new project with routing option

ng new my-app –routing

2) Create two components - login and register

ng generate component login

ng generate component register

3) Create respective module files in each component folder     as below:

register.module.ts

4) Create a respective router module file in each component folder

register-routing.module.ts

Now my project structure will look like below:

5) Import router module in app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

Remove register component import and declaration from app.module.ts, as each view will have their own module defined.

6) Add code in component routing

my-app-routing.module.ts

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

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

import { RegisterComponent } from './register.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

const routes: Routes = [

  {

    path: '',

    component: RegisterComponent

  }];

@NgModule({

  imports: [RouterModule.forChild(routes)],

  exports: [RouterModule]

})

export class RegisterRoutingModule { }

By using forChild we will call child modules (featured module) in app’s main routing module.

In my-app.module.ts

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

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

import { RegisterRoutingModule } from './register-routing.module';

import { RegisterComponent } from './register.component';

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({

  declarations: [RegisterComponent],

  imports: [

    CommonModule,

    ReactiveFormsModule,

    RegisterRoutingModule

  ]

})

export class RegisterModule { }

Then in app’s main routing module we will define Routes using loadChildren attribute. The loadChildren module uses # to define each independent module’s name.

In app-routing.module.ts

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

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

import { LoginComponent } from './login/login.component';

import { RegisterComponent } from './register/register.component';

const routes: Routes = [{

    path: "",

    redirectTo: "/login",

    pathMatch: 'full'

  },

    {

        path: 'login',

        component: LoginComponent

    },

    {

        path: 'register',

        loadChildren: './register/register.module#RegisterModule'

    }

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

And finally add links to Route/Open views

register.component.html

<button [disabled]="loading" class="btn btn-primary" routerLink="register">Register</button>

Now run application using by using below command:

ng-serve

Which will produce below output.

At first only login module will load see attached screenshot

After clicking on register button, register module will load.

Hope this helps.