Guard with observable causing the entire app to misbehave [Minimal stackblitz included]

[vajahath]

🐞 bug report

Affected Package

This can be by the @angular/router

Is this a regression?

No

Description

Let's say I have a guard like this:

const authState = new ReplaySubject<boolean>();
setTimeout(() => {
  authState.next(true);
}, 2000);

// guard
@Injectable({
  providedIn: "root",
})
export class AuthGuard implements CanActivate {
  constructor() { }

  canActivate(): Observable<boolean> {
    return authState
  }
}

And a routing like this:

const routes: Routes = [
  { path: "route-1", component: Route1Component, canActivate: [AuthGuard] },
  { path: "route-2", component: Route2Component, canActivate: [AuthGuard] },
  { path: "", pathMatch: "full", redirectTo: "route-1" }
];

Then, when I try to navigate from the "route-1" to "route-2" via a <a routerLink="../route-2">. The app navigation goes out of ngZone (or that is what I understand from the error message).

Moreover, when this happens, every routerLinks in "route-2" goes buggy. And the app layouts etc. jumps while clicking this buggy routerLink (may be because this happens out of zone).

And if you comment out the

// { path: "", pathMatch: "full", redirectTo: "route-1" }

this kind of works. Strange!

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-hkhiy3?devtoolsheight=33&file=src/app/route-1.component.ts

• start form the root page /
• open console
• click "to-router-2"
• you see the err message in console
• and the routerLinks in route-2 goes buggy

🔥 Exception or Error

Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

🌍 Your Environment

Angular Version:

Angular CLI: 11.2.8
Node: 12.19.0
OS: win32 x64

Angular: 11.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.8
@angular-devkit/build-angular   0.1102.8
@angular-devkit/core            11.2.8
@angular-devkit/schematics      11.2.8
@angular/cdk                    11.2.8
@angular/cli                    11.2.8
@angular/fire                   6.1.4
@angular/material               11.2.8
@schematics/angular             11.2.8
@schematics/update              0.1102.8
ng-packagr                      11.2.4
rxjs                            6.6.7
typescript                      4.1.5

[JoostK]

I'd consider this a duplicate of #37223. As the console warning suggests, the navigation is triggered outside of the Angular zone. The signal that completes the Observable that has been returned from the guard originates from a setTimeout that was scheduled from the top-level, such that the Angular Zone was not active at that point. This causes all subsequent route processing to also occur outside of the Angular zone, which affects how and when change detection runs. That is why the warning is reported.

And if you comment out the

// { path: "", pathMatch: "full", redirectTo: "route-1" }
this kind of works. Strange!

This is only because Stackblitz does hot module reloading such that the Subject in the different file is not refreshed; therefore it continues to have been completed. As such, the router guard completes synchronously while the NgZone is still active. A full reload shows that it is broken as before.

Using the rezone trick as presented in #37223 (comment) makes this work as you expected:

import { Injectable, NgZone } from "@angular/core";
import {
  CanActivate,
  CanActivateChild,
  CanLoad,
  Route,
  UrlSegment,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  UrlTree
} from "@angular/router";
import { Observable, of, ReplaySubject } from "rxjs";
import { map, switchMap, take, tap } from "rxjs/operators";

let k = new ReplaySubject<boolean>();

@Injectable({
  providedIn: "root"
})
export class AuthGuard implements CanActivate {
  constructor(private zone: NgZone) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    console.log("In guard", state);
    return k.pipe(
      rezone(this.zone),
    );
  }
}

// simulating a later emitting observable
setTimeout(() => {
  k.next(true)
}, 500);

const rezone = (zone: NgZone) => <T>(source: Observable<T>) =>
  new Observable<T>(observer => source.subscribe({
    next: (v) => zone.run(() => observer.next(v)),
    error: (e) => zone.run(() => observer.error(e)),
    complete: () => zone.run(() => observer.complete()),
  }));

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}