Angular7: CanLoad Auth guard hangs browser

Question

I have created an AuthGuard Service and implemented CanLoad interface to it, as shown below

import { Injectable } from '@angular/core';
import { CanLoad, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanLoad {
  constructor(private router: Router) { }

  canLoad() {
    if (localStorage.getItem('isLoggedin')) {
      return true;
    }
    this.router.navigate(['/auth/login']);
    return false;
  }
}

Below is my App Routing module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './shared/guard/auth.guard';

const routes: Routes = [
  { path: '', loadChildren: './layout/layout.module#LayoutModule', canLoad: [AuthGuard] },
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule' },
  { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
  { path: '**', redirectTo: 'not-found' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

No files are being downloaded when I check the browser networks tab and I see a blank white page and Below is the warning I see in my browser

platform-browser.js:613 Throttling navigation to prevent the browser from hanging. See https://crbug.com/882238. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection

This is happening because of routing loop infinitely so check your router navigation — Niraj, Apr 30 '19 at 11:19
Wouldn't you need to add `pathMatch: 'full'` for your path with '', otherwise it would match with every other path as well. Hence you would have an infinite loop, since your AuthGuard would accidentally be called for your 'auth' route as well. — Erbsenkoenig, Apr 30 '19 at 12:45

score 1 · Answer 1 · answered Apr 30 '19 at 13:25

Finally solved the issue, just needed to reorder by routes as below

const routes: Routes = [
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule' },
  {
    path: '', loadChildren: './layout/layout.module#LayoutModule', canLoad: [AuthGuard],
  },
  { path: 'not-found', loadChildren: './not-found/not-found.module#NotFoundModule' },
  { path: '**', redirectTo: 'not-found' }
];

score 0 · Answer 2 · answered Apr 30 '19 at 11:21

Your code have some problem. Guard is only use to check you have permission to access that route or not so it's not ideal to redirect user to different route in the guard.

You must implements CanActivate interface not CanLoad interface

So your code must change into this

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) { }

  canActivate() {
    if (localStorage.getItem('isLoggedin')) {
      return true;
    }
    return false;
  }
}

canActivate does download all the files but canLoad doesn't hence it supports lazy loading greatly. Hence canLoad here checks if user is not logged in then go to login page else download the module. — Varun Sukheja, Apr 30 '19 at 11:26

score 0 · Answer 3 · answered Jun 13 '19 at 14:41

Problem is that default pathMatch is set to 'prefix' and that means every path will match empty path on the route which lead to this module. So possible fixes are, setting pathMatch: 'full', like this:

{ path: '', loadChildren: './layout/layout.module#LayoutModule', pathMatch: 'full', canLoad: [AuthGuard], },

or reorder routes as you already figured out in your answer.

Angular7: CanLoad Auth guard hangs browser

3 Answers3