AngularFireAuthGuards kill change detection #2444
Description
Version info
Angular: 9.1.4
Firebase: 7.14.2
AngularFire: 6.0.0
Other (e.g. Ionic/Cordova, Node, browser, operating system): Ionic (web only)
How to reproduce these conditions
Failing test unit, Plunkr, or JSFiddle demonstrating the problem
TBD, not sure how to minimally reproduce...
Steps to set up and reproduce
Sample data and security rules
Debug output
** Errors in the JavaScript console **
None
** Output from firebase.database().enableLogging(true); **
** Screenshots **
Expected behavior
Change detection should be working.
Old issue : #2367. This is not entirely fixed.
You can check here
angularfire/src/auth-guard/auth-guard.ts
Line 43 in 76104ef
Add a
NgZone.assertInAngularZone().And we get "Expected to be in Angular Zone, but it is not!".
Actual behavior
Random issues, due to change detection not working. I was blaming ionic to break change detection but as soon as I removed the AngularFireAuthGuard, everything started to behave correctly...
Workaround
Create a custom AuthGuard like this:
@Injectable({
providedIn: 'root',
})
export class AuthGuard extends AngularFireAuthGuard implements CanActivate {
constructor(
@Inject(FIREBASE_OPTIONS) options: FirebaseOptions,
@Optional()
@Inject(FIREBASE_APP_NAME)
nameOrConfig: string | FirebaseAppConfig | null | undefined,
zone: NgZone,
router: Router
) {
super(options, nameOrConfig, zone, router);
this.authState = this.authState.pipe(
observeOn(new ɵAngularFireSchedulers(zone).insideAngular)
);
}
}