5.1 release: support Firebase 5.5, multi-tab sync, function region selection, and Angular 7 (#1920)

* feat(afs): Support Firebase 5.5 and Firestore PersistenceSettings

* chore(): Now that app types are mostly fixed, pull from those

* chore(): Changelog entry for 5.1

* chore(): Use PersistenceSettings from interfaces, also fix types in firestore.ts

* fix(afs): Fix constructor ordering so this isn't a break

* feat(functions): Support region configuration via FunctionsRegionToken

* chore(): Changelog entry for region selection

* chore(): Support Angular 7 without peer dependency warnings

* chore(): Changelog for Angular 7

Author: jamesdaniels

CHANGELOG.md

@@ -1,3 +1,13 @@
+<a name="5.1.0"></a>
+# [5.1.0](https://github.com/angular/angularfire2/compare/5.0.0-rc.12...5.1.0) (2018-10-17)
+
+### Features
+
+* **core:** Support Angular 7 without peer dependency warnings ([ed92c45](https://github.com/angular/angularfire2/commit/ed92c45))
+* **afs:** Support Firebase 5.5 and Firestore PersistenceSettings ([a9cf1ca](https://github.com/angular/angularfire2/commit/a9cf1ca))
+* **functions:** Support region configuration via `FunctionsRegionToken` ([8901617](https://github.com/angular/angularfire2/commit/8901617))
+
+
 <a name="5.0.2"></a>
 ## [5.0.2](https://github.com/angular/angularfire2/compare/5.0.1...5.0.2) (2018-09-21)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angularfire2",
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "The official library of Firebase and Angular.",
   "private": true,
   "scripts": {
@@ -12,7 +12,7 @@
     "delayed_karma": "sleep 10 && karma start",
     "build": "rm -rf dist && node tools/build.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
-    "build:wrapper": "npm i --prefix wrapper && VERSION=5.0.2 npm run --prefix wrapper build"
+    "build:wrapper": "npm i --prefix wrapper && VERSION=5.1.0 npm run --prefix wrapper build"
   },
   "keywords": [
     "angular",
@@ -30,12 +30,12 @@
   },
   "homepage": "https://github.com/angular/angularfire2#readme",
   "dependencies": {
-    "@angular/common": "^6.0.0",
-    "@angular/compiler": "^6.0.0",
-    "@angular/core": "^6.0.0",
-    "@angular/platform-browser": "^6.0.0",
-    "@angular/platform-browser-dynamic": "^6.0.0",
-    "firebase": "^5.0.3",
+    "@angular/common": ">=6.0.0 <8",
+    "@angular/compiler": ">=6.0.0 <8",
+    "@angular/core": ">=6.0.0 <8",
+    "@angular/platform-browser": ">=6.0.0 <8",
+    "@angular/platform-browser-dynamic": ">=6.0.0 <8",
+    "firebase": "^5.5.0",
     "rxjs": "^6.0.0",
     "ws": "^3.3.2",
     "xhr2": "^0.1.4",
@@ -46,8 +46,9 @@
     "utf-8-validate": "~4.0.0"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.0.0",
-    "@angular/platform-server": "^6.0.0",
+    "@angular/compiler-cli": ">=6.0.0 <8",
+    "@angular/platform-server": ">=6.0.0 <8",
+    "@angular/animations": ">=6.0.0 <8",
     "@types/jasmine": "^2.5.36",
     "@types/request": "0.0.30",
     "concurrently": "^2.2.0",
@@ -82,7 +83,7 @@
     "systemjs": "^0.19.16",
     "systemjs-builder": "^0.15.7",
     "traceur": "0.0.96",
-    "typescript": ">=2.7.2 <2.8.0"
+    "typescript": ">=2.7.2 <2.8.0, >=3.1.1 <3.2"
   },
   "typings": "index.d.ts"
 }

src/auth/auth.spec.ts

@@ -1,4 +1,4 @@
-import { User } from 'firebase';
+import { User } from 'firebase/app';
 import { Observable, Subject } from 'rxjs'
 import { TestBed, inject } from '@angular/core/testing';
 import { FirebaseApp, FirebaseOptionsToken, AngularFireModule, FirebaseNameOrConfigToken } from '@angular/fire';

src/auth/auth.ts

@@ -2,7 +2,7 @@ import { Injectable, Inject, Optional, NgZone, PLATFORM_ID } from '@angular/core
 import { Observable, of, from } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { FirebaseAppConfig, FirebaseOptions } from '@angular/fire';
-import { User, auth } from 'firebase';
+import { User, auth } from 'firebase/app';
 
 import { FirebaseAuth, FirebaseOptionsToken, FirebaseNameOrConfigToken, _firebaseAppFactory, FirebaseZoneScheduler } from '@angular/fire';
 

src/core/angularfire2.spec.ts

@@ -4,7 +4,7 @@ import { FirebaseApp, AngularFireModule } from '@angular/fire';
 import { Subscription } from 'rxjs';
 import { COMMON_CONFIG } from './test-config';
 import { BrowserModule } from '@angular/platform-browser';
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 
 describe('angularfire', () => {
   let subscription:Subscription;

src/core/firebase.app.module.ts

@@ -1,7 +1,7 @@
 import { InjectionToken, NgModule, Optional } from '@angular/core';
-import {app, auth, database, firestore, functions, messaging, storage } from 'firebase';
+import { app, 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';
+import firebase from 'firebase/app'; // once fixed can pull in as "default as firebase" above
 
 // Public types don't expose FirebaseOptions or FirebaseAppConfig
 export type FirebaseOptions = {[key:string]: any};
@@ -17,6 +17,8 @@ export type FirebaseStorage = storage.Storage;
 export type FirebaseFirestore = firestore.Firestore;
 export type FirebaseFunctions = functions.Functions;
 
+// Have to implement as we need to return a class from the provider, we should consider exporting
+// this in the firebase/app types as this is our highest risk of breaks
 export class FirebaseApp implements app.App {
     name: string;
     options: {};
@@ -29,7 +31,7 @@ export class FirebaseApp implements app.App {
     storage: (storageBucket?: string) => FirebaseStorage;
     delete: () => Promise<void>;
     firestore: () => FirebaseFirestore;
-    functions: () => FirebaseFunctions;
+    functions: (region?: string) => FirebaseFunctions;
 }
 
 export function _firebaseAppFactory(options: FirebaseOptions, nameOrConfig?: string | FirebaseAppConfig) {

src/database-deprecated/firebase_object_observable.ts

@@ -1,6 +1,6 @@
 import { Observable, Operator, Subscriber, Subscription } from 'rxjs';
 import { Reference } from './interfaces';
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 
 export class FirebaseObjectObservable<T> extends Observable<T> {
   constructor(subscribe?: <R>(subscriber: Subscriber<R>) => Subscription | Function | void, public $ref?:Reference) {

src/database-deprecated/interfaces.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 
 export type Reference = database.Reference;
 export type DataSnapshot = database.DataSnapshot;

src/database/interfaces.ts

@@ -1,5 +1,5 @@
 import { Observable } from 'rxjs';
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 
 export type FirebaseOperation = string | database.Reference | database.DataSnapshot;
 

src/database/list/changes.spec.ts

@@ -1,4 +1,4 @@
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 import { FirebaseApp, AngularFireModule } from '@angular/fire';
 import { AngularFireDatabase, AngularFireDatabaseModule, listChanges } from '@angular/fire/database';
 import { TestBed, inject } from '@angular/core/testing';

src/database/list/remove.ts

@@ -1,6 +1,6 @@
 import { DatabaseReference, DataSnapshot, FirebaseOperation, DatabaseSnapshot } from '../interfaces';
 import { checkOperationCases } from '../utils';
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 
 // TODO(davideast): Find out why TS thinks this returns firebase.Primise
 // instead of Promise.

src/database/list/snapshot-changes.spec.ts

@@ -1,4 +1,4 @@
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 import { FirebaseApp, AngularFireModule } from '@angular/fire';
 import { AngularFireDatabase, AngularFireDatabaseModule, snapshotChanges, ChildEvent } from '@angular/fire/database';
 import { TestBed, inject } from '@angular/core/testing';

src/database/list/state-changes.spec.ts

@@ -1,4 +1,4 @@
-import { database } from 'firebase';
+import { database } from 'firebase/app';
 import { FirebaseApp, AngularFireModule } from '@angular/fire';
 import { AngularFireDatabase, AngularFireDatabaseModule, stateChanges, ChildEvent } from '@angular/fire/database';
 import { TestBed, inject } from '@angular/core/testing';

src/firestore/collection/collection.ts

@@ -1,7 +1,7 @@
 import { Observable, from } from 'rxjs';
 import { fromCollectionRef } from '../observable/fromRef';
 import { map, filter, scan } from 'rxjs/operators';
-import { firestore } from 'firebase';
+import { firestore } from 'firebase/app';
 
 import { DocumentChangeType, CollectionReference, Query, DocumentReference, DocumentData, DocumentChangeAction } from '../interfaces';
 import { docChanges, sortedChanges } from './changes';

src/firestore/document/document.ts

@@ -5,7 +5,7 @@ import { map } from 'rxjs/operators';
 
 import { AngularFirestore, associateQuery } from '../firestore';
 import { AngularFirestoreCollection } from '../collection/collection';
-import { firestore } from 'firebase';
+import { firestore } from 'firebase/app';
 import { runInZone } from '@angular/fire';
 
 /**

src/firestore/firestore.module.ts

@@ -1,5 +1,6 @@
-import { InjectionToken, ModuleWithProviders, NgModule } from '@angular/core';
-import { AngularFirestore, EnablePersistenceToken } from './firestore';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { PersistenceSettings } from './interfaces';
+import { AngularFirestore, EnablePersistenceToken, PersistenceSettingsToken } from './firestore';
 
 import 'firebase/firestore';
 
@@ -10,11 +11,12 @@ export class AngularFirestoreModule {
   /**
    * Attempt to enable persistent storage, if possible
    */
-  static enablePersistence(): ModuleWithProviders {
+  static enablePersistence(persistenceSettings?: PersistenceSettings): ModuleWithProviders {
     return {
       ngModule: AngularFirestoreModule,
       providers: [
         { provide: EnablePersistenceToken, useValue: true },
+        { provide: PersistenceSettingsToken, useValue: persistenceSettings },
       ]
     }
   }

src/firestore/firestore.spec.ts

@@ -23,7 +23,7 @@ describe('AngularFirestore', () => {
     TestBed.configureTestingModule({
       imports: [
         AngularFireModule.initializeApp(COMMON_CONFIG),
-        AngularFirestoreModule.enablePersistence()
+        AngularFirestoreModule.enablePersistence({experimentalTabSynchronization: true})
       ]
     });
     inject([FirebaseApp, AngularFirestore], (_app: FirebaseApp, _afs: AngularFirestore) => {

src/firestore/firestore.ts

@@ -1,20 +1,21 @@
 import { InjectionToken, NgZone, PLATFORM_ID, Injectable, Inject, Optional } from '@angular/core';
 
 import { Observable, of, from } from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { firestore } from 'firebase';
 
-import { Settings, CollectionReference, DocumentReference, QueryFn, AssociatedReference } from './interfaces';
+import { Settings, PersistenceSettings, CollectionReference, DocumentReference, QueryFn, AssociatedReference } from './interfaces';
 import { AngularFirestoreDocument } from './document/document';
 import { AngularFirestoreCollection } from './collection/collection';
 
 import { FirebaseFirestore, FirebaseOptions, FirebaseAppConfig, FirebaseOptionsToken, FirebaseNameOrConfigToken, _firebaseAppFactory, FirebaseZoneScheduler } from '@angular/fire';
 import { isPlatformBrowser } from '@angular/common';
 
+import { firestore } from 'firebase/app';
+
 /**
  * The value of this token determines whether or not the firestore will have persistance enabled
  */
 export const EnablePersistenceToken = new InjectionToken<boolean>('angularfire2.enableFirestorePersistence');
+export const PersistenceSettingsToken = new InjectionToken<PersistenceSettings|undefined>('angularfire2.firestore.persistenceSettings');
 export const FirestoreSettingsToken = new InjectionToken<Settings>('angularfire2.firestore.settings');
 
 export const DefaultFirestoreSettings = {timestampsInSnapshots: true} as Settings;
@@ -110,7 +111,8 @@ export class AngularFirestore {
     @Optional() @Inject(EnablePersistenceToken) shouldEnablePersistence: boolean,
     @Optional() @Inject(FirestoreSettingsToken) settings: Settings,
     @Inject(PLATFORM_ID) platformId: Object,
-    zone: NgZone
+    zone: NgZone,
+    @Optional() @Inject(PersistenceSettingsToken) persistenceSettings: PersistenceSettings|undefined,
   ) {
     this.scheduler = new FirebaseZoneScheduler(zone, platformId);
     this.firestore = zone.runOutsideAngular(() => {
@@ -125,7 +127,7 @@ export class AngularFirestore {
       // https://github.com/firebase/firebase-js-sdk/issues/608
       const enablePersistence = () => {
         try {
-          return from(this.firestore.enablePersistence().then(() => true, () => false));
+          return from(this.firestore.enablePersistence(persistenceSettings).then(() => true, () => false));
         } catch(e) {
           return of(false);
         }

src/firestore/interfaces.ts

@@ -1,10 +1,10 @@
 import { Subscriber } from 'rxjs';
-import { firestore } from 'firebase';
+import { firestore } from 'firebase/app';
 
 export type Settings =  firestore.Settings;
 export type CollectionReference = firestore.CollectionReference;
 export type DocumentReference = firestore.DocumentReference;
-
+export type PersistenceSettings = firestore.PersistenceSettings;
 export type DocumentChangeType = firestore.DocumentChangeType;
 export type SnapshotOptions = firestore.SnapshotOptions;
 export type FieldPath = firestore.FieldPath;

src/firestore/utils.spec.ts

@@ -1,4 +1,4 @@
-import { firestore } from 'firebase';
+import { firestore } from 'firebase/app';
 import { AngularFirestoreCollection } from './collection/collection';
 
 export interface Stock {

src/functions/functions.spec.ts

@@ -1,7 +1,7 @@
 import { ReflectiveInjector, Provider } from '@angular/core';
 import { TestBed, inject } from '@angular/core/testing';
 import { FirebaseApp, FirebaseOptionsToken, AngularFireModule, FirebaseNameOrConfigToken } from '@angular/fire';
-import { AngularFireFunctions, AngularFireFunctionsModule } from '@angular/fire/functions';
+import { AngularFireFunctions, AngularFireFunctionsModule, FunctionsRegionToken } from '@angular/fire/functions';
 import { COMMON_CONFIG } from './test-config';
 
 describe('AngularFireFunctions', () => {
@@ -50,7 +50,8 @@ describe('AngularFireFunctions with different app', () => {
       ],
       providers: [
         { provide: FirebaseNameOrConfigToken, useValue: FIREBASE_APP_NAME_TOO },
-        { provide: FirebaseOptionsToken, useValue: COMMON_CONFIG }
+        { provide: FirebaseOptionsToken, useValue: COMMON_CONFIG },
+        { provide: FunctionsRegionToken, useValue: 'asia-northeast1' },
       ]
     });
     inject([FirebaseApp, AngularFireFunctions], (app_: FirebaseApp, _fns: AngularFireFunctions) => {
@@ -70,6 +71,10 @@ describe('AngularFireFunctions with different app', () => {
       expect(afFns instanceof AngularFireFunctions).toEqual(true);
     });
 
+    it('should have the Firebase Functions instance', () => {
+      expect(afFns.functions).toBeDefined();
+    });
+
   });
 
 });

src/functions/functions.ts

@@ -1,11 +1,11 @@
-import { Injectable, Inject, Optional, NgZone, PLATFORM_ID } from '@angular/core';
+import { Injectable, Inject, Optional, NgZone, PLATFORM_ID, InjectionToken } from '@angular/core';
 import { Observable, from } from 'rxjs';
 import { map } from 'rxjs/operators';
-
 import { FirebaseOptions, FirebaseAppConfig } from '@angular/fire';
-
 import { FirebaseFunctions, FirebaseOptionsToken, FirebaseNameOrConfigToken, _firebaseAppFactory, FirebaseZoneScheduler } from '@angular/fire';
 
+export const FunctionsRegionToken = new InjectionToken<string>('angularfire2.functions.region');
+
 @Injectable()
 export class AngularFireFunctions {
 
@@ -20,13 +20,14 @@ export class AngularFireFunctions {
     @Inject(FirebaseOptionsToken) options:FirebaseOptions,
     @Optional() @Inject(FirebaseNameOrConfigToken) nameOrConfig:string|FirebaseAppConfig|undefined,
     @Inject(PLATFORM_ID) platformId: Object,
-    zone: NgZone
+    zone: NgZone,
+    @Optional() @Inject(FunctionsRegionToken) region:string|undefined
   ) {
     this.scheduler = new FirebaseZoneScheduler(zone, platformId);
 
     this.functions = zone.runOutsideAngular(() => {
       const app = _firebaseAppFactory(options, nameOrConfig);
-      return app.functions();
+      return app.functions(region);
     });
 
   }

src/messaging/messaging.ts

@@ -1,6 +1,6 @@
 import { Injectable, Inject, Optional, NgZone, PLATFORM_ID } from '@angular/core';
 import { isPlatformBrowser } from '@angular/common';
-import { messaging } from 'firebase';
+import { messaging } from 'firebase/app';
 import { Observable, empty, from, of, throwError } from 'rxjs';
 import { mergeMap, catchError, map, switchMap, concat, defaultIfEmpty } from 'rxjs/operators';
 import { FirebaseOptions, FirebaseAppConfig, runOutsideAngular } from '@angular/fire';

src/storage/interfaces.ts

@@ -1,4 +1,4 @@
-import { storage } from 'firebase';
+import { storage } from 'firebase/app';
 
 export type UploadTask = storage.UploadTask;
 export type UploadTaskSnapshot = storage.UploadTaskSnapshot;

src/storage/observable/fromTask.ts

@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 import { UploadTask, UploadTaskSnapshot } from '../interfaces';
-import { storage } from 'firebase';
+import { storage } from 'firebase/app';
 
 export function fromTask(task: UploadTask) {
   return new Observable<UploadTaskSnapshot>(subscriber => {