Sunday

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.


Angular Routing with Lazy Loading Design Pattern

Live Demo
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
[embedded content]


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.


importLogoComponentfrom./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.


importCommonModulefrom@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.


importCommonModulefrom@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.


importRoutefrom@angular/router;

import LoginGuard from ../guards/login.guard;

import IndexComponent from ./index.component;

export const IndexRoutes: Route[] = [

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.


aimportRoutefrom@angular/router;

import AuthGuard from ./../guards/auth.guard;

import HomeComponent from ./home.component;


export const HomeRoutes: Route[] = [

component: HomeComponent,

canActivate: [AuthGuard],

children: [

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.


importRoutefrom@angular/router;

import DashboardComponent from ./dashboard.component;


export const DashboardRoutes: Route[] = [

component: DashboardComponent



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


importNgModulefrom@angular/core;

import CommonModule from @angular/common;

import RouterModule from @angular/router;

import DashboardRoutes from ./dashboard.routes;


@NgModule({

imports: [

RouterModule.forChild(DashboardRoutes),

CommonModule

declarations: [DashboardComponent],

exports: [DashboardComponent]

export class DashboardModule