FirebaseApp was not stable...

Author: jamesdaniels

src/auth/auth.ts

@@ -44,7 +44,7 @@ export class AngularFireAuth {
   ) {
     const scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.auth = zone.runOutsideAngular(() => {
-      const app = _firebaseAppFactory(options, nameOrConfig);
+      const app = _firebaseAppFactory(options, zone, nameOrConfig);
       return app.auth();
     });
 

src/core/firebase.app.module.ts

@@ -1,4 +1,4 @@
-import { InjectionToken, NgModule, Optional } from '@angular/core';
+import { InjectionToken, NgModule, Optional, NgZone } from '@angular/core';
 import { auth, database, firestore, functions, messaging, storage } from 'firebase/app';
 // @ts-ignore (https://github.com/firebase/firebase-js-sdk/pull/1206)
 import firebase from 'firebase/app'; // once fixed can pull in as "default as firebase" above
@@ -32,22 +32,23 @@ export class FirebaseApp {
     functions: (region?: string) => FirebaseFunctions;
 }
 
-export function _firebaseAppFactory(options: FirebaseOptions, nameOrConfig?: string|FirebaseAppConfig|null) {
+export function _firebaseAppFactory(options: FirebaseOptions, zone: NgZone, nameOrConfig?: string|FirebaseAppConfig|null) {
     const name = typeof nameOrConfig === 'string' && nameOrConfig || '[DEFAULT]';
     const config = typeof nameOrConfig === 'object' && nameOrConfig || {};
     config.name = config.name || name;
     // Added any due to some inconsistency between @firebase/app and firebase types
     const existingApp = firebase.apps.filter(app => app && app.name === config.name)[0] as any;
     // We support FirebaseConfig, initializeApp's public type only accepts string; need to cast as any
     // Could be solved with https://github.com/firebase/firebase-js-sdk/pull/1206
-    return (existingApp || firebase.initializeApp(options, config as any)) as FirebaseApp;
+    return (existingApp || zone.runOutsideAngular(() => firebase.initializeApp(options, config as any))) as FirebaseApp;
 }
 
 const FirebaseAppProvider = {
     provide: FirebaseApp,
     useFactory: _firebaseAppFactory,
     deps: [
         FirebaseOptionsToken,
+        NgZone,
         [new Optional(), FirebaseNameOrConfigToken]
     ]
 };

src/database-deprecated/database.ts

@@ -22,7 +22,7 @@ export class AngularFireDatabase {
     zone: NgZone
   ) {
     this.database = zone.runOutsideAngular(() => {
-      const app = _firebaseAppFactory(options, nameOrConfig);
+      const app = _firebaseAppFactory(options, zone, nameOrConfig);
       return app.database(databaseURL || undefined);
     });
   }

src/database/database.ts

@@ -20,7 +20,7 @@ export class AngularFireDatabase {
   ) {
     this.scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.database = zone.runOutsideAngular(() => {
-      const app = _firebaseAppFactory(options, nameOrConfig);
+      const app = _firebaseAppFactory(options, zone, nameOrConfig);
       return app.database(databaseURL || undefined);
     });
   }

src/firestore/firestore.ts

@@ -125,7 +125,7 @@ export class AngularFirestore {
   ) {
     this.scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.firestore = zone.runOutsideAngular(() => {
-      const app = _firebaseAppFactory(options, nameOrConfig);
+      const app = _firebaseAppFactory(options, zone, nameOrConfig);
       const firestore = app.firestore();
       firestore.settings(settings || DefaultFirestoreSettings);
       return firestore;

src/functions/functions.ts

@@ -30,7 +30,7 @@ export class AngularFireFunctions {
     this.scheduler = new FirebaseZoneScheduler(zone, platformId);
 
     this.functions = zone.runOutsideAngular(() => {
-      const app = _firebaseAppFactory(options, nameOrConfig);
+      const app = _firebaseAppFactory(options, zone, nameOrConfig);
       return app.functions(region || undefined);
     });
 

src/messaging/messaging.ts

@@ -27,7 +27,7 @@ export class AngularFireMessaging {
     const requireMessaging = from(import('firebase/messaging'));
 
     this.messaging = requireMessaging.pipe(
-      map(() => _firebaseAppFactory(options, nameOrConfig)),
+      map(() => _firebaseAppFactory(options, zone, nameOrConfig)),
       map(app => app.messaging()),
       runOutsideAngular(zone)
     );

src/storage/storage.ts

@@ -29,7 +29,7 @@ export class AngularFireStorage {
   ) {
     this.scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.storage = zone.runOutsideAngular(() => {
-      const app = _firebaseAppFactory(options, nameOrConfig);
+      const app = _firebaseAppFactory(options, zone, nameOrConfig);
       return app.storage(storageBucket || undefined);
     });
   }