Throttling history state changes to prevent the browser from hanging

This is a beginner angular question.

My Angular Application comprises of multiple feature modules.I used authguard by generating guard from the angular-cli and then I use CanActivate in my app-routing module like so :

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

const routes: Routes = [
{path:'login',loadChildren:'./login/login.module#LoginModule',canActivate: 
[AuthGuard]},
{path:'home', loadChildren:'./user/user.module#UserModule',canActivate: 
[AuthGuard]},
{path:'cart', 
loadChildren:'./cart/cart.module#CartModule',canActivate:[AuthGuard]},
 {path:'customer',loadChildren:'./customer/customer.module#CustomerModule',canActivate:[AuthGuard]}
];

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

In my auth guard I have written the condition to prevent the user from accessing unauthorized routes :

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

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean 
{
  if(["user","customer","cart"].indexOf(localStorage.pass)>=0){alert("auth 
guard!");
return true;}
else 
this.router.navigate(['/login']);
}
}

after building I get a warning WARNING in Duplicated path in loadChildren detected during a rebuild. We will take the latest version detected and override it to save rebuild time. You should perform a full build to validate that your routes don’t overlap.

So i googled it and found this comment ,after adding comma to the last path the warning disappeared.

But after that I logged in to my application and the following message appeared in the console : Throttling history state changes to prevent the browser from hanging and app got stuck.

Any ideas why?

EDIT : I finally got it to work by using ‘canLoad’ instead of ‘canActivate’, but it would be great if someone could provide some more insight regarding this issue.

Answer

Delete canActivate in login route. It’s loop.

Advertisement

Answer