Zoneless async router guards break change detection

🐞 bug report

Affected Package

The issue is caused by package @angular/router

Is this a regression?

Probably not

Description

Async router guards that run outside of zone break change detection.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-zoneless-guard-issue?file=src%2Fapp%2Fapp.module.ts

Change detection is triggered when clicking the button on the eagerly loaded component but it is not triggered when clicking the button on the lazy loaded component as it’s running outside of zone.

Even if async guards that run outside of zone are a rare case, it can happen and produce issues like with @angular/fire here https://github.com/angular/angularfire/issues/2453 or https://github.com/angular/angularfire/issues/2355.

Maybe the router should get back in the zone once the guard emits the value somewhere after the routing guard management here: https://github.com/angular/angular/blob/f930e75a809a1e21369050884c20f42a350c411f/packages/router/src/router.ts#L590-L631

Should I try to shoot a PR?

Thanks!

[JoostK]

I played with it a bit more and it appears that it can be simplified using an operator that wraps all notifications into a call to NgZone.run:

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()),
  }));

This can then be used together with dezone, see StackBlitz.

[JiaLiPassion]

I will try to check this one.