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.
Delete canActivate in login route. It’s loop.
In my case I had an infinite loop.
If you are using a wildcard (*) in your routing make sure that it is the last one in the list. You should define all other routes first.
{ path "https://stackoverflow.com/", component: HomeComponent },
{ path 'profile', component: ProfileComponent },
// All your other routes should come first
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }
Check in the Gaurd one of the path’s is trying to load multiple times as a loop.
This was my issue..
I recently had a similar problem and watching your code i noticed 2 things:
– You place the Authguard in the login path, even though is the access path.
– You don’t return a negative value in the guard, you just redirect.
Try fixing these 2 things and maybe it’ll help. I had a problem when I returned no value in the negative case and it caused me the same problem you are experiencing.
I was trying to reuse route guard, which had code to redirect to same page (before return true). if you are trying to load a path and redirecting to same path in canActivate, then it will result in infinite loop. To fix, Removed the redirect part (it was not needed), separated logic into another service.
I already had this issue for the whole day. Found as well this official post, but nothing explain clearly the problem here.
I was debugging the problem, and I found that my canActivate function had an error, trying to access to a property of an object that it was not initialised. I didn´t realized about it, and after this error (you will not see in console), the problem “Throttling history state changes to prevent the browser from hanging” started to trigger in a lopp…
Just my 2 cents: Make sure you don´t have any error in the function canActivate or canDeactivate.
Hope that it helps someone!
Cheers
Me too had the same issue in my react application in which I try to navigate to another page. This issue really happens due to in the case where you put the navigation code in a timeinterval loop.
In my case I tried window.location.href and also the react way below
import createBrowserHistory from 'history/createBrowserHistory';
let history=createBrowserHistory({forceRefresh: true});
history.push("/mypage");
to fix this issue you have to clear the timeintervel before navigating to another page
use below code to clear the interval
this.gameSeed = setInterval(() => {//your code to navigate }, 100);
clearInterval(this.gameSeed);
this.gameSeed = null;
