Guards break change detection as they don't seem to run in the right Zone

[yjaaidi]

Version info

Angular: 9.1.6

Firebase: 7.14.3

AngularFire: 6.0.0

Other (e.g. Ionic/Cordova, Node, browser, operating system): Browser

How to reproduce these conditions

I wasn't able to reproduce on Stackblitz due to firebase/auth import error but here is the source code.

https://github.com/yjaaidi/ng-experiments/tree/angular-fire-zone-issue

Debug output

Using this guard:

    ...canActivate(() => (source) => {
      console.log(Zone.current);
      return redirectLoggedInTo(['somewhere-else'])(source).pipe(
        tap(() => console.log(Zone.current))
      );
    }),

you can notice the following output where it seems that the guard isn't running in the right zone.

app.component.ts:22 Zone {_parent: Zone, _name: "angular", _properties: {…}, _zoneDelegate: ZoneDelegate}
app.component.ts:29 check app
app.component.ts:29 check app
2app.component.ts:29 check app
app-routing.module.ts:22 Zone {_parent: null, _name: "<root>", _properties: {…}, _zoneDelegate: ZoneDelegate}

Expected behavior

Change detection should work in lazy loaded component when using Angular fire's guards.

Actual behavior

When lazy loading components and using angular fire's guards, event listeners using event binding (click)=... and other things that should trigger change detection don't trigger it while they should.

[suzukieng]

This is probably the same issue as: https://github.com/angular/angularfire/issues/2355

[yjaaidi]

Thanks @suzukieng! In fact, this is totally related. We can probably close this issue as it's a duplicate.

[jamesdaniels]

Should have been addressed in a prior patch. Please let us know if you are still encountering.