Platform: After Angular 7 upgrade I started having problems with the Store Router Connector

Created on 19 Oct 2018 · 16Comments · Source: ngrx/platform

Minimal reproduction of the bug/regression with instructions:

Stackblitz seed is still on Angular 6.1.0, this occurs with Angular 7.0

When using a Route Guard to check if user is authenticated I will get the following error if the user is not authenticated and the Guard logic return false and I redirect to a login route.

The browser console reports:
Throttling history state changes to prevent the browser from hanging.

export const ROUTES: Routes = [
  {
    path: '',
    component: FeaturesContainerComponent,
    children: [
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
      {
        path: 'dashboard',
        canActivate: [AuthenticationGuard],
        component: DashboardComponent
      },
    ]
  },
  {
    path: 'login', // not secured
    component: LoginComponent
  }, {
    path: 'logout', // not secured
    component: LogoutComponent
  }
];

authentication.guard.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.checkIsAuthenticated();
}

public checkIsAuthenticated(): Observable<boolean> {

    return new Observable((observer) => {

        this.store.pipe(
            select(authenticationStateQuery.selectCheckIsAuthenticatedResult),
            takeUntil(this.unsubscribeSubject)
        )
        .subscribe((state: CheckIsAuthenticatedStatus) => {

                if (state) {
                    if (state.result) {
                       observer.next(true);
                       observer.complete();
                    } else {
                        // This part causes infinite loop and crashes browser.
                        observer.next(false);
                        observer.complete();
                        this.router.navigate(['/login']);
                    }
                    this.unsubscribeSubject.next(false);
                }
            });
        this.store.dispatch(new CheckIsAuthenticatedAction());

    }); 
}

Expected behavior:

The guard should work as it did with Angular 6, if the Guard logic determines the user is not authenticated then returning false to the router and then calling navigate should take me to the desired redirect without errors.

After disconnecting the StoreRouterConnectingModule from my app it works as expected.

Versions of NgRx, Angular, Node, affected browser(s) and operating system(s):

NGRX: v6.1.0
Angular: v7
Node: v8.9.0
Chrome
Linux CentOs 7.5

Other information:

I would be willing to submit a PR to fix this issue

[ ] Yes (Assistance is provided if you need help submitting a pull request)
[ x] No

Router Store bug

Source

jbeckton

👍13

Most helpful comment

Any Estimated time when 7 will be out?

LeoCreer on 23 Oct 2018

👍15

All 16 comments

This should be resolved when we finished the upgrade to Angular 7.

timdeschryver on 21 Oct 2018

This should be resolved when we finished the upgrade to Angular 7.

Estimated time?

aalmazanarbs on 23 Oct 2018

👍8

Any Estimated time when 7 will be out?

LeoCreer on 23 Oct 2018

👍15

Got the same issue.
Somebody has a workaround we are trying to update to Angular 7 (Coming from version 5) but it will not work.

Or is there any way I can update to version Angular 6.1?

xigolle on 24 Oct 2018

Any workaround for now?

wesselvdv on 30 Oct 2018

Fixed via https://github.com/ngrx/platform/pull/1379

6.1.1 will be published today with the fix

brandonroberts on 30 Oct 2018

6.1.1 has been published on npm

brandonroberts on 30 Oct 2018

👍3

Weird, I am actually still getting an infinite loop with 6.1.1, and a similar error in Safari as the op.

wesselvdv on 30 Oct 2018

👍3

Could you reproduce it in a repo or in stackblitz?

timdeschryver on 30 Oct 2018

@timdeschryver Try this https://github.com/pedep/ngrx-router-crash

I can get this to crash my tab pretty consistently on my 2012mbp/firefox63 and my thinkpadx220+linux/chrome55
You have to navigate from another page (like about:blank) to /admin, which should lead to an infinite loop

ROUTER_CANCEL triggers this
https://github.com/ngrx/platform/blob/236462ec39df43efc4c20c21f6e10f6462380939/modules/router-store/src/router_store_module.ts#L267

which triggers this (chain hops off somewhere, leading to this.dispatchTriggeredByRouter being )false, never being set true again.
https://github.com/ngrx/platform/blob/236462ec39df43efc4c20c21f6e10f6462380939/modules/router-store/src/router_store_module.ts#L284-L288
The navigation redirects to the guarded url again, triggering another ROUTER_CANCEL, beginning over at the top.

For some reason, this.routerState does not update with the route config for /user/sign_in before the loop begins.
https://github.com/ngrx/platform/blob/236462ec39df43efc4c20c21f6e10f6462380939/modules/router-store/src/router_store_module.ts#L254

If it succeeds without hanging the browser, you can try refresh or refresh with devtools closed (which is a factor for some reason...), or a incognito window.

In my own attempt at understanding the issue, i tried adding console.log statements here,
at the this.dispatchTriggeredByRouter = true and this.dispatchTriggeredByRouter = false line
https://github.com/ngrx/platform/blob/236462ec39df43efc4c20c21f6e10f6462380939/modules/router-store/src/router_store_module.ts#L338-L343

and also here
https://github.com/ngrx/platform/blob/236462ec39df43efc4c20c21f6e10f6462380939/modules/router-store/src/router_store_module.ts#L108

in the success case ( no loop ) it goes
1 this.dispatchTriggeredByRouter = true has happened
2 inside reducer
3 this.dispatchTriggeredByRouter = false has happened

while the failure case (infinite loop -> crash tab) it goes
1 this.dispatchTriggeredByRouter = true has happened
2 this.dispatchTriggeredByRouter = false has happened
3 inside reducer