Tuesday

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


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.


importNoPageComponentfrom‘./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 = [

component: HomeComponent

path: ‘index’,

component: IndexComponent

path: ‘**’,

component: NoPageComponent


@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]


exportclassAppRoutingModule


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.


<divclass=“container is-widescreen”>

<router-outlet></router-outlet>

<footerclass=“footer”>

<divclass=“content has-text-centered”>

<p>Footer Text</p>


</footer>


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


<navclass=“navbar”role=“navigation”aria-label=“main navigation”>

<divclass=“navbar-brand”>

<aclass=“navbar-item”>

<imgsrc=“https://bulma.io/images/bulma-logo.png”width=“112”height=“28”>

<divclass=“navbar-menu”>

<divclass=“navbar-end”>

<aclass=“navbar-item “ >

<aclass=“navbar-item “>


<divclass=“content”>

<sectionclass=“section”>

<divclass=“container mainBlock”>

index works!

</section>


</div>


home.html
Home component with Authenticated menu options.


<navclass=“navbar”role=“navigation”aria-label=“main navigation”>

<divclass=“navbar-brand”>

<aclass=“navbar-item”>

<imgsrc=“https://bulma.io/images/bulma-logo.png”width=“112”height=“28”>

<divclass=“navbar-menu”>

<divclass=“navbar-end”>

<aclass=“navbar-item “>

<aclass=“navbar-item “>

<aclass=“navbar-item “>

<aclass=“navbar-item “>


<divclass=“content”>

<sectionclass=“section”>

<divclass=“container mainBlock”>

Home works!

</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;

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.


importNgModulefrom‘@angular/core’;

import CommonModule from ‘@angular/common’;


@NgModule({

imports: [

CommonModule

declarations: []


exportclassIndexModule


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.


importNgModulefrom‘@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]


exportclassIndexModule


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.


importRoutefrom‘@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[] = [

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.


importRoutefrom‘@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[] = [

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….
<divclass=“content”>

<sectionclass=“section”>

<divclass=“container mainBlock”>

<router-outlet></router-outlet>

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


importNoPageComponentfrom‘./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.


importRoutesfrom‘@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.


importNgModulefrom‘@angular/core’;

import RouterModule from ‘@angular/router’;


@NgModule({

imports: [RouterModule.forRoot([])],

exports: [RouterModule]


exportclassAppRoutingModule


app.module.ts
Implementing lazy load routing and import the RouterModule with application routes.


importBrowserModulefrom‘@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]


exportclassAppModule


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


Part 2: Route Guards Implementation – Working in progress