fix(core): support Firebase 7 peer and fix zone instabilities (#2240)

* Allowing Firebase 7 as a peer * Fixed the zone.js issue in the injectable `FirebaseApp`, this also fixes the zone instability caused by loading `AngularFirePerformanceModule` * Added tests for Angular 9 RC (haven't included them in the Travis job yet)
angular · Nov 12, 2019 · 60fd575 · 60fd575
1 parent 97d8532
commit 60fd575
Show file tree

Hide file tree

Showing 53 changed files with 1,146 additions and 10,185 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,4 +13,5 @@ angularfire2-*.tgz
 .DS_Store
 yarn-error.log
 *.bak
-package-lock.json
+package-lock.json
+test/ng-build/**/yarn.lock
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@angular/fire",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "The official library of Firebase and Angular.",
   "private": true,
   "scripts": {
@@ -42,7 +42,7 @@
     "@angular/platform-browser": ">=6.0.0 <9 || ^9.0.0-0",
     "@angular/platform-browser-dynamic": ">=6.0.0 <9 || ^9.0.0-0",
     "@angular/router": ">=6.0.0 <9 || ^9.0.0-0",
-    "firebase": ">= 5.5.7 <7",
+    "firebase": ">= 5.5.7 <8",
     "firebase-tools": "^6.10.0",
     "fuzzy": "^0.1.3",
     "inquirer": "^6.2.2",

diff --git a/src/auth/auth.ts b/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();
     });
 

diff --git a/src/core/firebase.app.module.ts b/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]
     ]
 };

diff --git a/src/database-deprecated/database.ts b/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);
     });
   }

diff --git a/src/database/database.ts b/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);
     });
   }

diff --git a/src/firestore/firestore.ts b/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;

diff --git a/src/functions/functions.ts b/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);
     });
 

diff --git a/src/messaging/messaging.ts b/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)
     );

diff --git a/src/performance/performance.ts b/src/performance/performance.ts
@@ -31,7 +31,7 @@ export class AngularFirePerformance {
   ) {
 
     // @ts-ignore zapping in the UMD in the build script
-    const requirePerformance = from(import('firebase/performance'));
+    const requirePerformance = from(zone.runOutsideAngular(() => import('firebase/performance')));
 
     this.performance = requirePerformance.pipe(
       // SEMVER while < 6 need to type, drop next major

diff --git a/src/storage/storage.ts b/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);
     });
   }

diff --git a/test/ng-build/build.sh b/test/ng-build/build.sh
@@ -1,3 +1,3 @@
-cd ./test/ng-build/ng6 && yarn && npx ng build --prod &&
-cd ../ng7 && yarn && npx ng build --prod &&
-cd ../ng8 && yarn && npx ng build --prod
+cd ./test/ng-build/ng6 && yarn && yarn build:prod &&
+cd ../ng7 && yarn && yarn build:prod &&
+cd ../ng8 && yarn && yarn build:prod
diff --git a/test/ng-build/ng6/package.json b/test/ng-build/ng6/package.json
@@ -23,6 +23,7 @@
     "@angular/platform-browser": "6.0.1",
     "@angular/platform-browser-dynamic": "6.0.1",
     "@angular/router": "6.0.1",
+    "firebase": "<7",
     "core-js": "^2.4.1",
     "rxjs": "^6.0.0",
     "zone.js": "^0.8.14"

diff --git a/test/ng-build/ng6/src/app/app.component.ts b/test/ng-build/ng6/src/app/app.component.ts
@@ -6,6 +6,7 @@ import { AngularFirestore } from '@angular/fire/firestore';
 import { AngularFireStorage } from '@angular/fire/storage';
 import { AngularFireMessaging } from '@angular/fire/messaging';
 import { AngularFireFunctions } from '@angular/fire/functions';
+import { AngularFirePerformance } from '@angular/fire/performance';
 
 @Component({
   selector: 'app-root',
@@ -38,8 +39,9 @@ export class AppComponent {
     private readonly afStore: AngularFirestore,
     private readonly storage: AngularFireStorage,
     private readonly messaging: AngularFireMessaging,
-    private readonly functions: AngularFireFunctions
+    private readonly functions: AngularFireFunctions,
+    private readonly perf: AngularFirePerformance
   ) {
-    console.log(app, db, auth, afStore, storage, messaging, functions);
+    console.log(app, db, auth, afStore, storage, messaging, functions, perf);
   }
 }
diff --git a/test/ng-build/ng6/src/app/app.module.ts b/test/ng-build/ng6/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { AngularFireStorageModule } from '@angular/fire/storage';
 import { AngularFireFunctionsModule } from '@angular/fire/functions';
 import { AngularFireMessagingModule } from '@angular/fire/messaging';
+import { AngularFirePerformanceModule } from '@angular/fire/performance';
 
 import { AppComponent } from './app.component';
 
@@ -29,7 +30,8 @@ import { AppComponent } from './app.component';
     AngularFirestoreModule,
     AngularFireStorageModule,
     AngularFireMessagingModule,
-    AngularFireFunctionsModule
+    AngularFireFunctionsModule,
+    AngularFirePerformanceModule
   ],
   bootstrap: [AppComponent]
 })

diff --git a/test/ng-build/ng7/package.json b/test/ng-build/ng7/package.json
@@ -5,6 +5,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"

diff --git a/test/ng-build/ng7/src/app/app.component.ts b/test/ng-build/ng7/src/app/app.component.ts
@@ -7,6 +7,7 @@ import { AngularFirestore } from '@angular/fire/firestore';
 import { AngularFireStorage } from '@angular/fire/storage';
 import { AngularFireMessaging } from '@angular/fire/messaging';
 import { AngularFireFunctions } from '@angular/fire/functions';
+import { AngularFirePerformance } from '@angular/fire/performance';
 
 @Component({
   selector: 'app-root',
@@ -22,8 +23,9 @@ export class AppComponent {
     private readonly afStore: AngularFirestore,
     private readonly storage: AngularFireStorage,
     private readonly messaging: AngularFireMessaging,
-    private readonly functions: AngularFireFunctions
+    private readonly functions: AngularFireFunctions,
+    private readonly perf: AngularFirePerformance
   ) {
-    console.log(app, db, auth, afStore, storage, messaging, functions);
+    console.log(app, db, auth, afStore, storage, messaging, functions, perf);
   }
 }
diff --git a/test/ng-build/ng7/src/app/app.module.ts b/test/ng-build/ng7/src/app/app.module.ts
@@ -8,6 +8,8 @@ import { AngularFirestoreModule } from '@angular/fire/firestore';
 import { AngularFireStorageModule } from '@angular/fire/storage';
 import { AngularFireMessagingModule } from '@angular/fire/messaging';
 import { AngularFireFunctionsModule } from '@angular/fire/functions';
+import { AngularFirePerformanceModule } from '@angular/fire/performance';
+import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';
 
 import { AppComponent } from './app.component';
 
@@ -30,7 +32,9 @@ import { AppComponent } from './app.component';
     AngularFirestoreModule,
     AngularFireStorageModule,
     AngularFireMessagingModule,
-    AngularFireFunctionsModule
+    AngularFireFunctionsModule,
+    AngularFirePerformanceModule,
+    AngularFireAuthGuardModule
   ],
   providers: [],
   bootstrap: [AppComponent]