Create CanLoad In Angular

Introduction

 

In this article, we will learn how to create Angular applications using CanLoad.

 

Step 1

 

Create an Angular project setup using the below commands or however you create your Angular app

 

ng new sample-canload

 

 

Step 2

 

Open a new terminal and run the following below commands.

 

Install Boostrap as a dependency in your app

 

npm install bootstrap

 

angular.json

"styles": [
  "./node_modules/bootstrap/dist/css/bootstrap.css",
  "src/styles.scss"
],

Add the style boostrap url in angular.json file.

 

Step 3 - CanLoad Guard

 

The CanLoad Guard hinders the loading of the Lazy Loaded Module. We generally use this guard when we do not need unauthorized routes of the module in any navigation.

 

CanActivate

 

CanActivate is route navigation before the component is loaded.

 

CanLoad

 

If you check the user to see the route to a moudule that lazy-loaded.

 

How to use CanLoad Guard in service

 

Now we will create angular service then we implement the CanLoad.

 

Create authguard-service,

 

ng g s auth-guard

 

 

App.module.ts

 

Now we will provide service in app.moudule.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuardService } from './auth-guard.service';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [AuthGuardService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4

 

Next, we can create lazy load module component

 

ng generate module dashboard --route dashboard --module app.module

 

 

ng generate module user --route user --module app.module

 

 

Step 5

 

Next, we need to generate the Service in the app-routing.module.ts

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () =>
      import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
    canLoad: [AuthGuardService],
  },
  {
    path: 'user',
    loadChildren: () => import('./user/user.module').then((m) => m.UserModule),
    canLoad: [AuthGuardService],
  },
];

app.component.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">C# Corner-sam</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link" routerLink="/dashboard" [routerLinkActive]="['active']">Home <span class="sr-only">(current)</span></a>
        <a class="nav-item nav-link"  routerLink="/user" [routerLinkActive]="['active']">Users</a>
      </div>
    </div>
  </nav>
<router-outlet></router-outlet>

Step 6

 

In angular app we are creating two modules dashboardModule & UserModule. Now we will build canload guard, which stops UserModule from loading.

 

Then, we build a AuthGuardService which Implements the CanLoad Interface. Find the following canload authguard.

import { Injectable } from '@angular/core';
import { CanLoad, Route, Router } from '@angular/router';
@Injectable({
  providedIn: 'root',
})
export class AuthGuardService implements CanLoad {
  constructor(private router: Router) {}
  canLoad(route: Route): boolean {
    let urlPath: string = route.path;
    if (urlPath === 'user') {
      alert('unauthorised the page');
      return false;
    }
    return true;
  }
}

Step 7

 

Now we will run the application

 

npm run start

 

 

In the browser, open the inspect element and click on network. We will see that only Dashboardmodule is shown and not Usermodule: