Angular 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

Angular Lazy Load Routing with Route GuardsDownload this project on Github

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.

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.

app.component.html
Adding common footer design for all the future project pages using Bulma layouts.

<router-outlet></router-outlet>

</div>

<p>Footer Text</p>

</div>

</footer>

index.html
Index component with unauthenticated menu options with design.

</a>

</div>

Signup

</a>

</a>

</div>

</nav>

<p>

index works!

</p>

</div>

</section>

</div>

home.html
Home component with Authenticated menu options.

</a>

</div>

Dashboard

</a>

Products

</a>

Settings

</a>

Logout

</a>

</div>

</nav>

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

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.

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">

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

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