Angular Routing with Lazy Loading Design Pattern

Lazy loading is a design pattern to implement large scale Angular projects. Using this system design we can load the components based on the application need. This way we can increase the application performance. This article is a continues of Angular routing project, please follow the previous parts for better understanding. This will explain how to covert default component-based structure to Angular lazy loading pattern.

Live Demo

Angular Lazy Load Routing with Route GuardsDownload this project on Github

GIT Checkout
Checkout the GIT branch and switch the branch to old for upcoming steps.

$git clone https://github.com/srinivastamada/angular-routing
$cd angular-routing
$git checkout old
$npm install
$ng serve

Note: GIT master branch updated with lazy loading routes. Please try to checkout old branch and try these steps to practice more.

Video Tutorial

Converting Component Routes to Lazy Loading

Adding Index Page Modules
Create module files for all of the pages under index route.

project$ ng generate module index/login --nospec
CREATE src/app/index/login/login.module.ts (275 bytes)
project$ ng generate module index/forgot --nospec
CREATE src/app/index/forgot/forgot.module.ts (279 bytes)
project$ ng generate module index/signup --nospec
CREATE src/app/index/signup/signup.module.ts (279 bytes)
project$ ng generate module index/system-error --nospec
CREATE src/app/index/system-error/system-error.module.ts (300 bytes)

Adding Home Page Modules
Follow the same for home route pages.

project$ ng generate module home/dashboard --nospec
CREATE src/app/home/dashboard/dashboard.module.ts (291 bytes)
project$ ng generate module home/products --nospec
CREATE src/app/home/products/products.module.ts (287 bytes)
project$ ng generate module home/settings --nospec
CREATE src/app/home/settings/settings.module.ts (287 bytes)
project$ ng generate module home/user --nospec
CREATE src/app/home/user/user.module.ts (271 bytes)

Components Module
Create a module file for child components.

project$ ng generate module components --nospec
CREATE src/app/components/components.module.ts (271 bytes)

components.module.ts
Here we have to import all of the shared child components. Import exiting components and newly generated components will automatically import to the module.

import { LogoComponent } from './logo/logo.component';

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

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

@NgModule({

imports: [

CommonModule

declarations: [LogoComponent],

exports:[LogoComponent]

})

exportclassComponentsModule{}

index.module.ts
Modify and import the Index component with components module. For more information watch the video.

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

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

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

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

import { ComponentsModule } from './../components/components.module';

import { IndexComponent } from './index.component';

@NgModule({

imports: [CommonModule, FormsModule, RouterModule, ComponentsModule],

declarations: [IndexComponent],

exports: [IndexComponent]

})

export class IndexModule {}

home.module.ts
Modify and import the Home component with components module. Delete previously imported page components.

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

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

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

import { ComponentsModule } from './../components/components.module';

import { HomeComponent } from './home.component';

@NgModule({

imports: [CommonModule, RouterModule, ComponentsModule, ComponentsModule],

declarations: [HomeComponent],

exports: [HomeComponent]

})

export class HomeModule {}

index.routes.ts
Now connect the routes with page modules using loadChildren.

import { Route } from '@angular/router';

import { LoginGuard } from '../guards/login.guard';

import { IndexComponent } from './index.component';

export const IndexRoutes: Route[] = [

{

path: '',

component: IndexComponent,

canActivate: [LoginGuard],

children: [

{

path: 'login',

loadChildren: 'app/index/login/login.module#LoginModule'

{

path: 'signup',

loadChildren: 'app/index/signup/signup.module#SignupModule'

{

path: 'forgot',

loadChildren: 'app/index/forgot/forgot.module#ForgotModule'

{

path: 'system-error',

loadChildren:

'app/index/system-error/system-error.module#SystemErrorModule'

}

]

}

];

home.routes.ts
Modify with home page routes with page modules.

aimport { Route } from '@angular/router';

import { AuthGuard } from './../guards/auth.guard';

import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [

{

path: '',

component: HomeComponent,

canActivate: [AuthGuard],

children: [

{

path: '',

loadChildren: 'app/dashboard/dashboard.module#DashboardModule'

{

path: 'settings',

loadChildren: 'app/home/settings/settings.module#SettingsModule'

{

path: 'products',

loadChildren: 'app/home/products/products.module#SettingsModule'

{

path: 'user/:username',

loadChildren: 'app/home/user/user.module#UserModule'

{

path: 'user/:username/:id',

loadChildren: 'app/home/user/users.module#UserModule'

}

]

}

];

Create Routes for Page Components

dashboard.routes.ts
Create a routes file under pages. This will help you to maintain sub-pages eg: http://domain.com/settings/change-password. You have to create this for every page with own name.

import { Route } from '@angular/router';

import { DashboardComponent } from './dashboard.component';

export const DashboardRoutes: Route[] = [

{

path: '',

component: DashboardComponent

}

];

dashboard.module.ts
Connect the routes file with RouterModule. This rule applies to all of the pages.

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

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

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