store: 🐞[BUG]: CanActivate & CanLoad cause the browser to hang if they cause a navigation in their logic

Affected Package

Possibly:

NgxsModule
NgxsRouterPluginModule

Is this a regression?

Description

CanActivate causes the browser to hang if it causes a navigation in its logic. Chrome reports the following error:

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

The way I’ve got around this issue is to add a setTimeout.

🔬 Minimal Reproduction

canActivate(
    route: ActivatedRouteSnapshot,
  ): boolean {
    const accessToken = this.store.selectSnapshot(AuthState.accessToken);

    // if no token is found take them back to the login screen
    if (!accessToken) {
      this.store.dispatch(new Navigate(['/identity/login']));
      return false;
    }
    return true;
  }

🔥 Exception or Error


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

Environment

Libs:

@angular/core version: 8.2.4
@ngxs/store version: 3.5.1

Browser:

Chrome (desktop) version 76
Chrome (Android) version XX
Chrome (iOS) version XX
Firefox version XX
Safari (desktop) version XX
Safari (iOS) version XX
IE version XX
Edge version XX

For Tooling issues:

Node version: v10.13.0
Platform: Windows

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 6
Comments: 16 (4 by maintainers)

Most upvoted comments

Here is the stackblitz: https://stackblitz.com/edit/angular-router-basic-example-f7dyf5?file=app%2Fapp.routing.module.ts

I’ve commented canActivate, as soon as you uncomment it, you’ll get the hanging/throttle error.

If i downgrade to 3.4.3 it works fine.

Looking at it, it might have something to do with the empty path which children routes. If i try the canActivate elsewhere its fine.

johnwalshuk on Sep 2, 2019

@johnwalshuk I also am experiencing an issue with 3.5.1. Downgrading to 3.5.0 is good enough, or if you comment this line in 3.5.1

https://github.com/ngxs/store/pull/1236/files#diff-96aa2bf67839c8810b8cab91460e8323R160

Ref: https://github.com/ngxs/store/issues/542 https://github.com/ngxs/store/pull/1236

cc: @markwhitfeld

rhutchison on Sep 9, 2019

I am facing the same issue. I am using CanActivate.

nehal076 on Aug 25, 2020

@arturovt help us

splincode on Oct 17, 2019

I also experienced the same problem. Dispatching a Navigate action in CanActivate hangs the browser.

If you turn on ‘enableTracing’ in Angular’s Router (RouterModule.forRoot([], { enableTracing: true });), you can see that there seems to be an infinite loop between NavigationStart/Cancel/End events which blocks the router from functioning as expected.

drakenfly on Oct 16, 2019

I’m experiencing the same issue using version: 3.5.1 on every major browser. I’m trying to redirect to login page in an interceptor when intercept 401 error. I saw chrome warning Throttling navigation to prevent the browser from hanging which right under the 401 error and is caused by this.store.dispatch(new Navigation(['/login'])). I replaced the dispatch command with this.router.navigate and it stops hanging. I downgrade the version from 3.5.1 to 3.5.0 and keep this.store.dispatch(new Navigation(['/login'])), it also stops hanging.

wunaidage on Sep 9, 2019

I am facing the same issue. I am using CanActivate.

@nehal076 Try using canLoad instead of canActivate

imsorx on Dec 2, 2020

I have the same issue

zorrme on Oct 17, 2019