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
 
Create CanLoad In Angular
 
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
  1. "styles": [  
  2.   "./node_modules/bootstrap/dist/css/bootstrap.css",  
  3.   "src/styles.scss"  
  4. ],  
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
 
Create CanLoad In Angular
 
App.module.ts
 
Now we will provide service in app.moudule.ts
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { AuthGuardService } from './auth-guard.service';  
  6. @NgModule({  
  7.   declarations: [  
  8.     AppComponent  
  9.   ],  
  10.   imports: [  
  11.     BrowserModule,  
  12.     AppRoutingModule  
  13.   ],  
  14.   providers: [AuthGuardService],  
  15.   bootstrap: [AppComponent]  
  16. })  
  17. export class AppModule { }  
Step 4
 
Next, we can create lazy load module component
 
ng generate module dashboard --route dashboard --module app.module
 
Create CanLoad In Angular
 
ng generate module user --route user --module app.module
 
Create CanLoad In Angular
 
Step 5
 
Next, we need to generate the Service in the app-routing.module.ts
  1. const routes: Routes = [  
  2.   {  
  3.     path: 'dashboard',  
  4.     loadChildren: () =>  
  5.       import('./dashboard/dashboard.module').then((m) => m.DashboardModule),  
  6.     canLoad: [AuthGuardService],  
  7.   },  
  8.   {  
  9.     path: 'user',  
  10.     loadChildren: () => import('./user/user.module').then((m) => m.UserModule),  
  11.     canLoad: [AuthGuardService],  
  12.   },  
  13. ];  
app.component.html
  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">  
  2.     <a class="navbar-brand" href="#">C# Corner-sam</a>  
  3.     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">  
  4.       <span class="navbar-toggler-icon"></span>  
  5.     </button>  
  6.     <div class="collapse navbar-collapse" id="navbarNavAltMarkup">  
  7.       <div class="navbar-nav">  
  8.         <a class="nav-item nav-link" routerLink="/dashboard" [routerLinkActive]="['active']">Home <span class="sr-only">(current)</span></a>  
  9.         <a class="nav-item nav-link"  routerLink="/user" [routerLinkActive]="['active']">Users</a>  
  10.       </div>  
  11.     </div>  
  12.   </nav>  
  13. <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.
  1. import { Injectable } from '@angular/core';  
  2. import { CanLoad, Route, Router } from '@angular/router';  
  3. @Injectable({  
  4.   providedIn: 'root',  
  5. })  
  6. export class AuthGuardService implements CanLoad {  
  7.   constructor(private router: Router) {}  
  8.   canLoad(route: Route): boolean {  
  9.     let urlPath: string = route.path;  
  10.     if (urlPath === 'user') {  
  11.       alert('unauthorised the page');  
  12.       return false;  
  13.     }  
  14.     return true;  
  15.   }  
  16. }  
Step 7
 
Now we will run the application
 
npm run start
 
Create CanLoad In Angular
 
In the browser, open the inspect element and click on network. We will see that only Dashboardmodule is shown and not Usermodule:
 
Create CanLoad In Angular

Recommended Ebook

Angular 7 - For Beginners

Download Now!
Similar Articles