🐞[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:

• 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: #542 #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

[zsdycs]

@nehal076 Try using instead of canLoad``canActivate

@imsorx

Why do you need to make this modification?

There was no problem running the program before.

This problem occurred with npm start after I cloned the code from the git repository today.

I used your solution to run successfully, but I can't understand it.

If you can tell me the reason, I would be very grateful.

[DejazmachMolla]

canLoad and canActivate are not the same thing, it's not right to use them interchangeably. For those of you who are using CanActivate and are encountering this issue, check your local storage if the authorities or whatever you call is empty. That was the issue in my case.

[pedromaironi]

I have de same bug