Angular Lazy Load Routing using Route Guards
Wall Script
MailxEngine
Follow Me:
Sunday, September 16, 2018

Angular Lazy Load Routing using Route Guards

Angular command line comes with excellent features which are helpful for generating new components, guards and services etc. I personally like the route guards, the way handling user authentication system. Let’s take a look the post that how to implement Angular lazy loading routing using route guards authentication to protect the application URLs. I am planning to split this article into multiple parts to explain it to better way.

Angular Lazy Load Routing with Route Guards Structure


Live Demo


Install Angular Command Line
Install latest node and execute the following command using terminal or command promote.
npm install -g @angular/cli

Create and Launch an Angular Project
Here ng new command will take care the project files. Use ng serve command to launch the application. Use audit fix command for fixing the npm plugin vulnerabilities. Using --routing and --style=scss adds the project with default routing and sass features.
ng new angular-routing-project --routing --style=scss

cd angular-routing-project

npm audit fix

ng serve

Project Launch
Angular Cli project default port is 4200. Open your browser and launch the URL http://localhost:4200

Video Tutorial - Angular Lazy Load Routing using Route Guards


Routing Components
This project need three main/root components for routing.

Index Component
Under this component we are going to create no unauthenticated child components like login, signup and forgot. Use the following ng command to generate files automatically.
ng generate component index

Home Component
The same way home component going to handle all of the user authenticated child components like dashboard, setting etc.
ng generate component home

NoPage Component
General no-page-found 404 page for unwanted urls. You can use short commands. 
ng g c no-page

This is how components will generate.
Angular Lazy Load Routing with Route Guards Structure

General Routing
The default routing module, but we are not going to use this in feature steps. For working with initial page design, use the following routes implementation.

app-routing.module.ts
Import all of your main components into routes and run ng serve and access http://localhost:4200/ and http://localhost:4200/index.
import { NoPageComponent } from './no-page/no-page.component';
import { HomeComponent } from './home/home.component';
import { IndexComponent } from './index/index.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
{
path: '',
component: HomeComponent
},
{
path: 'index',
component: IndexComponent
},
{
path: '**',
component: NoPageComponent
}
];

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

Design
For better understanding the menu design, we are using Bulma framework. This is very light weight CSS framework to make the page design little quickly.

npm install bulma --save-dev

styles.scss
Import the Bulma SASS framework into the project.
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";

You will find this file in project app folder.
Angular Lazy Load Routing with Route Guards Structure

app.component.html
Adding common footer design for all the future project pages using Bulma layouts.
<div class="container is-widescreen">
<router-outlet></router-outlet>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>Footer Text</p>
</div>
</footer>

index.html
Index component with unauthenticated menu options with design.
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item " >
Signup
</a>
<a class="navbar-item ">
Login
</a>
</div>
</div>
</nav>

<div class="content">
<section class="section">
<div class="container mainBlock">
<p>
index works!
</p>
</div>
</section>
</div>

home.html
Home component with Authenticated menu options.
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item ">
Dashboard
</a>
<a class="navbar-item ">
Products
</a>
<a class="navbar-item ">
Settings
</a>
<a class="navbar-item ">
Logout
</a>
</div>
</div>
</nav>

<div class="content">
<section class="section">
<div class="container mainBlock">
<p>
Home works!
</p>
</div>
</section>
</div>

no-page.component.html
Follow the same and remove the nav menu items.

styles.scss
Add other custom class here.
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
.mainBlock{
min-height: 400px;
}
nav{
border-bottom: solid 1px #333333;
}


Lazy Load Routing
Converting this with lazy load routing. Now we are going to work with modules.

Generate Index module
Use ng command to generate module.
ng generate module index

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

@NgModule({
imports: [
CommonModule
],
declarations: []
})
export class IndexModule { }

Generate Home module
Same way to generate Home module
ng g m home

File structure.
Angular Lazy Load Routing with Route Guards Structure

Index Child Components
Generate unauthenticated components under Index.
$ ng g c index/login

ng g c index/signup

ng g c index/forgot


Home Child Components
Generate authenticated components under home.
ng g c home/dashboard

ng g c home/settings

ng g c home/products

Make sure file structure should be.
Angular Lazy Load Routing with Route Guards Structure

index.module.ts
ng command automatically updates the module with child component imports.
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login/login.component';
import { ForgotComponent } from './forgot/forgot.component';
import { SignupComponent } from './signup/signup.component';

@NgModule({
imports: [
CommonModule
],
declarations: [LoginComponent, ForgotComponent, SignupComponent]
})
export class IndexModule { }


home.module.ts
Same way home module update with child components.

Child Routing
Create new routes for Index, Home and NoPage. This way you can manage all the child component paths.

index.router.ts
Create paths for unauthenticated page paths.
import { Route } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { ForgotComponent } from './forgot/forgot.component';
import { SignupComponent } from './signup/signup.component';
import { IndexComponent } from './index.component';

export const IndexRoutes: Route[] = [
{
path: '',
component: IndexComponent,
children: [
{ path: 'login', component: LoginComponent },
{ path: 'signup', component: SignupComponent },
{ path: 'forgot', component: ForgotComponent }
]
}
];

home.router.ts
Paths for authentication pages. Default empty path for application dashboard page, you can based on your project requirement.
import { Route } from '@angular/router';
import { HomeComponent } from './home.component';
import { SettingsComponent } from './settings/settings.component';
import { ProductsComponent } from './products/products.component';
import { DashboardComponent } from './dashboard/dashboard.component';
export const HomeRoutes: Route[] = [
{
path: '',
component: HomeComponent,
children: [
{ path: '', component: DashboardComponent },
{ path: 'settings', component: SettingsComponent },
{ path: 'products', component: ProductsComponent }
]
}
];

index.component.html
Modify the content part and include <router-outlet> tag. Now all the child components load here.
// navbar code....
<div class="content">
<section class="section">
<div class="container mainBlock">
<router-outlet></router-outlet>
</div>
</section>
</div>

no-page.routes.ts
Include path for no page found page. Do not modify the component HTML, because we are not loading any child components here. Modify the design directly on no-page.component.html file
import { NoPageComponent } from './no-page.component';
import { Route } from '@angular/router';

export const NoPageRoutes: Route[] = [
{
path: '**',
component: NoPageComponent
}
];

Create routing files under the index, no-page and home folders.
Angular Lazy Load Routing with Route Guards Structure

Connect with App Router

app.router.ts
Create an application level router file and include all the sub routes.
import { Routes } from '@angular/router';
import { HomeRoutes } from './home/home.routes';
import { IndexRoutes } from './index/index.routes';
import { NoPageRoutes } from './no-page/no-page.routes';

export const routes: Routes = [...HomeRoutes, ...IndexRoutes, ...NoPageRoutes];


app-routing.module.ts
Drop the general routing.
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

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

app.module.ts
Implementing lazy load routing and import the RouterModule with application routes.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './app.routing';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IndexComponent } from './index/index.component';
import { HomeComponent } from './home/home.component';
import { NoPageComponent } from './no-page/no-page.component';
import { HomeModule } from './home/home.module';
import { IndexModule } from './index/index.module';

@NgModule({
declarations: [AppComponent, IndexComponent, HomeComponent, NoPageComponent],
imports: [
BrowserModule,
AppRoutingModule,
HomeModule,
IndexModule,
RouterModule.forRoot(routes)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}

Try following URLs
Restand the server and launch the application and try following URLs.
http://localhost:4200/login
http://localhost:4200/signup
http://localhost:4200/forgot

http://localhost:4200/
http://localhost:4200/settings
http://localhost:4200/products

Video Tutorial - Angular Lazy Load Routing using Route Guards


Part 2: Route Guards Implementation - Working in progress
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


1 comments:

Make in India