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:'home', loadChildren:'./user/user.module#UserModule',canActivate: 

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 
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';

export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean 
return true;}

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 "", component: HomeComponent },
{ path 'profile', component: ProfileComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }

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!


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.

Read More:   Redux - multiple stores, why not?

In my case I tried window.location.href and also the react way below

import createBrowserHistory from 'history/createBrowserHistory';

 let history=createBrowserHistory({forceRefresh: true});

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);

this.gameSeed = null;

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts