Route Guards : Angular route guards definition, type

 Angular's route guards are interfaces which can tell the router whether or not it should allow navigation to a requested route.

There are five different types of guards

CanActivate: It guards a link and allow to access conditionally such as in user authentication application.

CanActivateChild: As we learned about guarding routes with CanActivate, we can also protect child routes with the CanActivateChild guard. The CanActivateChild guard works similarly to the CanActivate guard, but the difference is its run before each child route is activated. We protected our admin feature module from unauthorized access, but we could also protect child routes within our feature module.

CanDeactivate: guard which decides if a route can be deactivated. for example, suppose a user is changing form data and before saving, user tries to navigate away. In this scenario we can use CanDeactivate guard which will deactivate the route and open a Dialog Box to take user confirmation.

CanLoad

The CanLoad Guard prevents the loading of the Lazy Loaded Module. We generally use this guard when we do not want to unauthorized user to navigate to any of the routes of the module and also stop then even see the source code of the module.

The Angular provides canActivate Guard, which prevents unauthorized user from accessing the route. But it does not stop the module from being downloaded. The user can use the chrome developer console to see the source code. The CanLoad Guard prevents the module from being downloaded.

Resolve

The Angular renders the Angular Component, when we navigate to a route. The component will then sends an HTTP request to back end server to fetch data so as to display it to the user. We generally do this in ngOnInit Life cycle hook

The Problem with the above approach is that, the use will see a empty component. The component shows the data after the arrival of the data. The one way is solve this problem is to show some loading indicator

The another way to solve this is to make use the Resolve Guard. The Resolve Guard pre fetches the data before the navigating to the route. Hence the component is rendered along with the data.

import { Injectable } from '@angular/core';

import { ActivatedRouteSnapshot, RouterStateSnapshot, Router, CanActivate } from '@angular/router';

@Injectable({

providedIn: 'root'

})

export class IntroGuard implements CanActivate {

constructor(public router: Router) {}

async canActivate(

next: ActivatedRouteSnapshot,

state: RouterStateSnapshot

): Promise<boolean> {

let isComplete = true;

if (localStorage.getItem('isFirstTime') == null) {

this.router.navigateByUrl('/intro');

isComplete = false;

}

return isComplete;

}

}

{

path: '',

loadChildren: './pages/home/home.module#HomePageModule',

canActivate: [IntroGuard]

}

Reference: https://www.concretepage.com/questions/597