WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Angular Lazy Load Routing using Route Guards


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

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

General Routing

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

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

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>

styles.scss


@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

$ 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

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

index.module.ts

ng command automatically updates the module with child component imports.

Child Routing

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

index.router.ts

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 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
}
];

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 { }