Using firebase calls in a guard throws error

[ChristofferSkog21st]

Version info

Angular:
7.2.5

Firebase:
5.8.3

AngularFire:
5.1.1

How to reproduce these conditions

1. Add @angular/fire to the project
2. Initialize the app with the Firebase credentials
3. Create a guard which calls the firebase.auth() function for example and then use it on a route

Steps to set up and reproduce

Just go to this link and you can see the issue if you open the console:
https://stackblitz.com/edit/angular-su5p89

Sample data and security rules
No data or security rules required to reproduce this issue.

Debug output

** Errors in the JavaScript console **

ERROR Error: Uncaught (in promise): [DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
[DEFAULT]: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at error (index.cjs.js:361)
at app (index.cjs.js:244)
at Object.serviceNamespace [as auth] (index.cjs.js:302)
at AuthGuard.performCheck (auth.guard.ts:35)
at AuthGuard.canActivate (auth.guard.ts:29)
at eval (check_guards.ts:121)
at Observable.eval [as _subscribe] (defer.ts:59)
at Observable._trySubscribe (Observable.ts:231)
at Observable.subscribe (Observable.ts:212)
at TakeOperator.call (take.ts:72)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at eval (zone.js:892)
at ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (ng_zone.ts:262)
at ZoneDelegate.invokeTask (zone.js:422)
at Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)

** Output from firebase.database().enableLogging(true); **
I can't seem to add this to the app, it says "Property 'enableLogging' does not exist on type 'DataBase'".

Expected behavior

I would expect that calling initializeApp is called and fully completes before the guard runs, right now that does not seem to be the case.

Actual behavior

The guard fires and throws an error suggesting that the initialization has not been done or is not completed.

I can't see any logic behind this but it seems like a very severe bug.

[davideast]

Hey @ChristofferSkog21st!

The Firebase App is never initialized since you're using the regular SDK before you ever use AngularFire. This is a quirk, but we don't initialize the default App until you inject / use AngularFire due to problems with Zone.js. Refactor your guard to use AngularFireAuth and I strongly recommend using the observable authState rather than check the synchronous value of currentUser.

Working blitz: https://stackblitz.com/edit/angular-dybvss?file=src/app/auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, CanLoad } from '@angular/router';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from '@angular/fire/auth';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class AuthGuard implements CanActivate, CanActivateChild, CanLoad {

  /** @ignore */
  constructor(private afAuth: AngularFireAuth) {
    // just to show the app exists
    console.log(firebase.apps);
  }

  canLoad(): Observable<boolean> {
    return this.performCheck();
  }

  canActivate(): Observable<boolean> {
    return this.performCheck();
  }

  canActivateChild(): Observable<boolean> {
    return this.performCheck();
  }

  private performCheck() {
    return this.afAuth.authState.pipe(map(u => !!u));
  }
}