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

[johnwalshuk]

Affected Package

Possibly:

• NgxsModule
• NgxsRouterPluginModule

Is this a regression?

No

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:

• [x] 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

[splincode]

Show me full example on stackblitz

[arturovt]

Closing until reproduction is provided :)

[johnwalshuk]

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.

[rhutchison]

@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

[wunaidage]

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.

[drakenfly]

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.

[zorrme]

I have the same issue

[splincode]

@arturovt help us

[menudoproblema]

I have the same issue using @angular/core: 8.2.11, but this issue only occurs by executing the build command, using the serve command works fine

[GrumWald]

So what is current solution for this bug? Because I got the same error but I don't use ngxStore

[danyhiol]

This is very annoying. It took me two days to realize that the error was from me adding this module to my app. @GrumWald I'll suggest getting back 3.5.0

[nehal076]

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

[imsorx]

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

@nehal076 Try using canLoad instead of canActivate