fix(): Switching over to firebase from @firebase/* (#1677)

* fix(): Switching over to `firebase` from `@firebase/*`

* docs(auth): import auth from firebase/app

* chore(): Update typings test

docs/auth/getting-started.md

@@ -11,7 +11,7 @@ the Firebase docs for more information on what methods are available.](https://f
 ```ts
 import { Component } from '@angular/core';
 import { AngularFireAuth } from 'angularfire2/auth';
-import { firebase } from '@firebase/app';
+import { auth } from 'firebase/app';
 
 @Component({
   selector: 'app-root',
@@ -30,7 +30,7 @@ export class AppComponent {
   constructor(public afAuth: AngularFireAuth) {
   }
   login() {
-    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
+    this.afAuth.auth.signInWithPopup(new auth.GoogleAuthProvider());
   }
   logout() {
     this.afAuth.auth.signOut();

karma.conf.js

@@ -25,7 +25,12 @@ module.exports = function(config) {
       ...getAngularFiles(['core','common','compiler','platform-browser','platform-browser-dynamic']),
 
       'karma-test-shim.js',
-      'node_modules/firebase/firebase.js',
+      'node_modules/firebase/firebase-app.js',
+      'node_modules/firebase/firebase-auth.js',
+      'node_modules/firebase/firebase-database.js',
+      'node_modules/firebase/firebase-firestore.js',
+      'node_modules/firebase/firebase-functions.js',
+      'node_modules/firebase/firebase-storage.js',
       'dist/packages-dist/bundles/core.umd.{js,map}',
       'dist/packages-dist/bundles/auth.umd.{js,map}',
       'dist/packages-dist/bundles/database.umd.{js,map}',

package.json

@@ -34,19 +34,7 @@
     "@angular/core": "^6.0.0",
     "@angular/platform-browser": "^6.0.0",
     "@angular/platform-browser-dynamic": "^6.0.0",
-    "@firebase/app": "^0.3.1",
-    "@firebase/app-types": "^0.3.1",
-    "@firebase/auth": "^0.5.2",
-    "@firebase/auth-types": "^0.3.2",
-    "@firebase/database": "^0.3.1",
-    "@firebase/database-types": "^0.3.1",
-    "@firebase/firestore": "^0.5.2",
-    "@firebase/firestore-types": "^0.4.1",
-    "@firebase/functions": "^0.2.2",
-    "@firebase/functions-types": "^0.1.2",
-    "@firebase/messaging-types": "^0.2.2",
-    "@firebase/storage": "^0.2.2",
-    "@firebase/storage-types": "^0.2.2",
+    "firebase": "^5.0.3",
     "bufferutil": "^3.0.3",
     "rxjs": "^6.0.0",
     "utf-8-validate": "^4.0.0",
@@ -63,7 +51,6 @@
     "conventional-changelog-cli": "^1.2.0",
     "es6-module-loader": "^0.17.10",
     "es6-shim": "^0.35.0",
-    "firebase": "^5.0.2",
     "fs-extra": "^4.0.0",
     "gulp": "^3.9.0",
     "gulp-jasmine": "^2.2.1",

src/auth/auth.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { AngularFireAuth } from './auth';
-import '@firebase/auth';
+
+import 'firebase/auth';
 
 @NgModule({
   providers: [ AngularFireAuth ]

src/auth/auth.spec.ts

@@ -1,4 +1,4 @@
-import { User } from '@firebase/auth-types';
+import { User } from 'firebase/app';
 import { ReflectiveInjector, Provider } from '@angular/core';
 import { Observable, Subject } from 'rxjs'
 import { TestBed, inject } from '@angular/core/testing';

src/auth/auth.ts

@@ -1,11 +1,11 @@
-import { FirebaseAuth, User, IdTokenResult } from '@firebase/auth-types';
-import { FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types';
 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 'angularfire2';
 
-import { FirebaseOptionsToken, FirebaseNameOrConfigToken, _firebaseAppFactory, FirebaseZoneScheduler } from 'angularfire2';
+import { User, auth } from 'firebase/app';
 
+import { FirebaseAuth, FirebaseOptionsToken, FirebaseNameOrConfigToken, _firebaseAppFactory, FirebaseZoneScheduler } from 'angularfire2';
 
 @Injectable()
 export class AngularFireAuth {
@@ -35,7 +35,7 @@ export class AngularFireAuth {
    * helper properties for getting different data associated with the token as well as all the decoded payload claims
    * (or null).
    */
-  public readonly idTokenResult: Observable<IdTokenResult|null>;
+  public readonly idTokenResult: Observable<auth.IdTokenResult|null>;
 
   constructor(
     @Inject(FirebaseOptionsToken) options:FirebaseOptions,

src/auth/package.json

@@ -22,8 +22,7 @@
     "@angular/core": "ANGULAR_VERSION",
     "@angular/platform-browser": "ANGULAR_VERSION",
     "@angular/platform-browser-dynamic": "ANGULAR_VERSION",
-    "@firebase/app": "FIREBASE_APP_VERSION",
-    "@firebase/auth": "FIREBASE_AUTH_VERSION",
+    "firebase": "FIREBASE_VERSION",
     "rxjs": "RXJS_VERSION",
     "zone.js": "ZONEJS_VERSION"
   },

src/core/angularfire2.spec.ts

@@ -1,18 +1,18 @@
 
-import { Reference } from '@firebase/database-types';
 import { TestBed, inject, withModule, async } from '@angular/core/testing';
 import { ReflectiveInjector, Provider, PlatformRef, NgModule, Compiler, ApplicationRef, CompilerFactory } from '@angular/core';
 import { FirebaseApp, AngularFireModule } from 'angularfire2';
 import { Subscription } from 'rxjs';
 import { COMMON_CONFIG } from './test-config';
 import { BrowserModule } from '@angular/platform-browser';
+import { database } from 'firebase/app';
 
 describe('angularfire', () => {
   let subscription:Subscription;
   let app: FirebaseApp;
-  let rootRef: Reference;
-  let questionsRef: Reference;
-  let listOfQuestionsRef: Reference;
+  let rootRef: database.Reference;
+  let questionsRef: database.Reference;
+  let listOfQuestionsRef: database.Reference;
   let defaultPlatform: PlatformRef;
 
   const APP_NAME = 'super-awesome-test-firebase-app-name';

src/core/angularfire2.ts

@@ -3,12 +3,6 @@ import { isPlatformServer } from '@angular/common';
 import { Observable, Subscription, queueScheduler as queue } from 'rxjs';
 import { first } from 'rxjs/operators';
 
-import { firebase } from '@firebase/app';
-import { FirebaseApp, FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types';
-
-export const FirebaseOptionsToken = new InjectionToken<FirebaseOptions>('angularfire2.app.options');
-export const FirebaseNameOrConfigToken = new InjectionToken<string|FirebaseAppConfig|undefined>('angularfire2.app.nameOrConfig')
-
 // Put in database.ts when we drop database-depreciated
 export const RealtimeDatabaseURL = new InjectionToken<string>('angularfire2.realtimeDatabaseURL');
 

src/core/firebase.app.module.ts

@@ -1,22 +1,28 @@
 import { InjectionToken, NgZone, NgModule, Optional } from '@angular/core';
+import { app, auth, apps, database, firestore, functions, initializeApp, messaging, storage } from 'firebase/app';
 
-import { FirebaseOptionsToken, FirebaseNameOrConfigToken } from './angularfire2';
+// Public types don't expose FirebaseOptions or FirebaseAppConfig
+export type FirebaseOptions = {[key:string]: any};
+export type FirebaseAppConfig = {[key:string]: any};
 
-import firebase from '@firebase/app';
-import { FirebaseApp as _FirebaseApp, FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types';
-import { FirebaseAuth } from '@firebase/auth-types';
-import { FirebaseDatabase } from '@firebase/database-types';
-import { FirebaseMessaging } from '@firebase/messaging-types';
-import { FirebaseStorage } from '@firebase/storage-types';
-import { FirebaseFirestore } from '@firebase/firestore-types';
-import { FirebaseFunctions } from '@firebase/functions-types';
+export const FirebaseOptionsToken = new InjectionToken<FirebaseOptions>('angularfire2.app.options');
+export const FirebaseNameOrConfigToken = new InjectionToken<string|FirebaseAppConfig|undefined>('angularfire2.app.nameOrConfig')
 
-export class FirebaseApp implements _FirebaseApp {
+export type FirebaseDatabase = database.Database;
+export type FirebaseAuth = auth.Auth;
+export type FirebaseMessaging = messaging.Messaging;
+export type FirebaseStorage = storage.Storage;
+export type FirebaseFirestore = firestore.Firestore;
+export type FirebaseFunctions = functions.Functions;
+
+export class FirebaseApp implements app.App {
     name: string;
-    automaticDataCollectionEnabled: boolean;
     options: {};
     auth: () => FirebaseAuth;
+    // app.App database() doesn't take a databaseURL arg in the public types?
     database: (databaseURL?: string) => FirebaseDatabase;
+    // automaticDataCollectionEnabled is now private? _automaticDataCollectionEnabled?
+    // automaticDataCollectionEnabled: true,
     messaging: () => FirebaseMessaging;
     storage: (storageBucket?: string) => FirebaseStorage;
     delete: () => Promise<void>;
@@ -28,8 +34,9 @@ export function _firebaseAppFactory(options: FirebaseOptions, nameOrConfig?: str
     const name = typeof nameOrConfig === 'string' && nameOrConfig || '[DEFAULT]';
     const config = typeof nameOrConfig === 'object' && nameOrConfig || {};
     config.name = config.name || name;
-    const existingApp = firebase.apps.filter(app => app.name === config.name)[0];
-    return (existingApp || firebase.initializeApp(options, config)) as FirebaseApp;
+    const existingApp = apps.filter(app => app && app.name === config.name)[0];
+    // We support FirebaseConfig, initializeApp's public type only accepts string; need to cast as any
+    return (existingApp || (initializeApp as any)(options, config)) as FirebaseApp;
 }
 
 const FirebaseAppProvider = {

src/core/package.json

@@ -21,7 +21,7 @@
     "@angular/core": "ANGULAR_VERSION",
     "@angular/platform-browser": "ANGULAR_VERSION",
     "@angular/platform-browser-dynamic": "ANGULAR_VERSION",
-    "@firebase/app": "FIREBASE_APP_VERSION",
+    "firebase": "FIREBASE_VERSION",
     "rxjs": "RXJS_VERSION",
     "zone.js": "ZONEJS_VERSION"
   },

src/database-deprecated/database.module.ts

@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { AngularFireDatabase } from './database';
-import '@firebase/database';
+import 'firebase/database';
 
 @NgModule({
   providers: [ AngularFireDatabase ]

src/database-deprecated/database.ts

@@ -1,13 +1,11 @@
-import { FirebaseDatabase } from '@firebase/database-types';
 import { Inject, Injectable, Optional, NgZone } from '@angular/core';
 import { FirebaseListFactory } from './firebase_list_factory';
 import { FirebaseListObservable } from './firebase_list_observable';
 import { FirebaseListFactoryOpts, FirebaseObjectFactoryOpts, PathReference } from './interfaces';
 import { FirebaseObjectFactory } from './firebase_object_factory';
 import { FirebaseObjectObservable } from './firebase_object_observable';
 import * as utils from './utils';
-import { FirebaseOptions, FirebaseAppConfig } from '@firebase/app-types';
-import { FirebaseOptionsToken, FirebaseNameOrConfigToken, RealtimeDatabaseURL, _firebaseAppFactory } from 'angularfire2';
+import { FirebaseDatabase, FirebaseOptions, FirebaseAppConfig, FirebaseOptionsToken, FirebaseNameOrConfigToken, RealtimeDatabaseURL, _firebaseAppFactory } from 'angularfire2';
 
 @Injectable()
 export class AngularFireDatabase {

src/database-deprecated/firebase_list_factory.ts

@@ -1,13 +1,12 @@
 import { NgZone } from '@angular/core';
-import * as database from '@firebase/database-types';
 import { FirebaseZoneScheduler } from 'angularfire2';
 import * as utils from './utils';
 import { AFUnwrappedDataSnapshot } from './interfaces';
 import { FirebaseListObservable } from './firebase_list_observable';
 import { Observer } from 'rxjs';
 import { observeOn, switchMap, map } from 'rxjs/operators';
 import { observeQuery } from './query_observable';
-import { Query, FirebaseListFactoryOpts, DatabaseReference, DatabaseQuery, DatabaseSnapshot } from './interfaces';
+import { Reference, Query, FirebaseListFactoryOpts, DatabaseReference, DatabaseQuery, DatabaseSnapshot } from './interfaces';
 
 export function FirebaseListFactory (
   ref: DatabaseReference,
@@ -90,7 +89,7 @@ export function FirebaseListFactory (
       }
 
       return queried;
-    }), (queryRef: database.Reference, ix: number) => {
+    }), (queryRef: Reference, ix: number) => {
       return firebaseListObservable(queryRef, { preserveSnapshot });
     })
     .subscribe(subscriber);
@@ -106,7 +105,7 @@ export function FirebaseListFactory (
  * asynchonous. It creates a initial array from a promise of ref.once('value'), and then starts
  * listening to child events. When the initial array is loaded, the observable starts emitting values.
  */
-function firebaseListObservable(ref: database.Reference | DatabaseQuery, {preserveSnapshot}: FirebaseListFactoryOpts = {}): FirebaseListObservable<any> {
+function firebaseListObservable(ref: Reference | DatabaseQuery, {preserveSnapshot}: FirebaseListFactoryOpts = {}): FirebaseListObservable<any> {
 
   const toValue = preserveSnapshot ? (snapshot => snapshot) : utils.unwrapMapFn;
   const toKey = preserveSnapshot ? (value => value.key) : (value => value.$key);

src/database-deprecated/firebase_list_observable.spec.ts

@@ -1,18 +1,17 @@
 import { FirebaseApp, FirebaseAppConfig, AngularFireModule} from 'angularfire2';
 import { AngularFireDatabase, AngularFireDatabaseModule, FirebaseListObservable, FirebaseObjectFactory } from 'angularfire2/database-deprecated';
-import { Observer } from 'rxjs/Observer';
-import { map } from 'rxjs/operator/map';
-import { FirebaseApp as FBApp } from '@firebase/app-types';
-import { DataSnapshot, Reference } from '@firebase/database-types';
+import { Observer } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { unwrapMapFn } from './utils';
+import { DataSnapshot, Reference } from './interfaces';
 
 import { TestBed, inject } from '@angular/core/testing';
 import { COMMON_CONFIG } from './test-config';
 
 describe('FirebaseListObservable', () => {
   let O: FirebaseListObservable<any>;
   let ref: Reference;
-  let app: FBApp;
+  let app: FirebaseApp;
   let db: AngularFireDatabase;
 
   beforeEach(() => {
@@ -22,7 +21,7 @@ describe('FirebaseListObservable', () => {
         AngularFireDatabaseModule
       ]
     });
-    inject([FirebaseApp, AngularFireDatabase], (_app: FBApp, _db: AngularFireDatabase) => {
+    inject([FirebaseApp, AngularFireDatabase], (_app: FirebaseApp, _db: AngularFireDatabase) => {
       app = _app;
       db = _db;
       ref = app.database().ref();

src/database-deprecated/firebase_list_observable.ts

@@ -1,7 +1,6 @@
 import { Observable, Operator, Subscriber, Subscription } from 'rxjs';
-import { Reference, DataSnapshot, ThenableReference } from '@firebase/database-types';
 import * as utils from './utils';
-import { AFUnwrappedDataSnapshot, FirebaseOperationCases, QueryReference, DatabaseSnapshot, DatabaseReference } from './interfaces';
+import { Reference, DataSnapshot, ThenableReference, AFUnwrappedDataSnapshot, FirebaseOperationCases, QueryReference, DatabaseSnapshot, DatabaseReference } from './interfaces';
 
 export type FirebaseOperation = string | Reference | DataSnapshot | AFUnwrappedDataSnapshot;
 

src/database-deprecated/firebase_object_factory.spec.ts

@@ -1,18 +1,17 @@
-import { FirebaseApp as FBApp } from '@firebase/app-types';
-import { Reference } from '@firebase/database-types';
 import { Subscription } from 'rxjs';
 import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
 import { AngularFireDatabase, AngularFireDatabaseModule, FirebaseObjectObservable, FirebaseObjectFactory } from 'angularfire2/database-deprecated';
 import { TestBed, inject } from '@angular/core/testing';
 import { COMMON_CONFIG } from './test-config';
+import { Reference } from './interfaces'
 
 describe('FirebaseObjectFactory', () => {
   let i = 0;
   let ref: Reference;
   let observable: FirebaseObjectObservable<any>;
   let subscription: Subscription;
   let nextSpy: jasmine.Spy;
-  let app: FBApp;
+  let app: FirebaseApp;
   let db: AngularFireDatabase;
 
   beforeEach(() => {

src/database-deprecated/firebase_object_factory.ts

@@ -3,9 +3,8 @@ import { FirebaseObjectObservable } from './firebase_object_observable';
 import { FirebaseZoneScheduler } from 'angularfire2';
 import { Observer } from 'rxjs';
 import { observeOn } from 'rxjs/operators';
-import { DataSnapshot } from '@firebase/database-types';
 import * as utils from './utils';
-import { FirebaseObjectFactoryOpts, DatabaseReference } from './interfaces';
+import { DataSnapshot, FirebaseObjectFactoryOpts, DatabaseReference } from './interfaces';
 
 export function FirebaseObjectFactory (
   ref: DatabaseReference,

src/database-deprecated/firebase_object_observable.spec.ts

@@ -2,16 +2,15 @@ import { TestBed, inject } from '@angular/core/testing';
 import { FirebaseApp, FirebaseAppConfig, AngularFireModule } from 'angularfire2';
 import { COMMON_CONFIG } from './test-config';
 import { AngularFireDatabase, AngularFireDatabaseModule, FirebaseObjectObservable } from 'angularfire2/database-deprecated';
-import { Observer } from 'rxjs/Observer';
-import { map } from 'rxjs/operator/map';
-import { FirebaseApp as FBApp } from '@firebase/app-types';
-import { Reference } from '@firebase/database-types';
+import { Observer } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Reference } from './interfaces';
 
 describe('FirebaseObjectObservable', () => {
 
   let O: FirebaseObjectObservable<any>;
   let ref: Reference;
-  let app: FBApp;
+  let app: FirebaseApp;
   let db: AngularFireDatabase;
 
   beforeEach(() => {
@@ -21,7 +20,7 @@ describe('FirebaseObjectObservable', () => {
         AngularFireDatabaseModule
       ]
     });
-    inject([FirebaseApp, AngularFireDatabase], (_app: FBApp, _db: AngularFireDatabase) => {
+    inject([FirebaseApp, AngularFireDatabase], (_app: FirebaseApp, _db: AngularFireDatabase) => {
       app = _app;
       db = _db;
       ref = app.database().ref();

src/database-deprecated/firebase_object_observable.ts

@@ -1,5 +1,6 @@
 import { Observable, Operator, Subscriber, Subscription } from 'rxjs';
-import { Reference } from '@firebase/database-types';
+import { Reference } from './interfaces';
+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,9 @@
 import { Observable } from 'rxjs';
-import { Reference, DataSnapshot, Query } from '@firebase/database-types';
+import { database } from 'firebase/app';
+
+export type Reference = database.Reference;
+export type DataSnapshot = database.DataSnapshot;
+export type ThenableReference = database.ThenableReference;
 
 export interface FirebaseOperationCases {
   stringCase: () => Promise<void>;
@@ -83,6 +87,6 @@ export type Primitive = number | string | boolean;
 
 export type DatabaseSnapshot = DataSnapshot;
 export type DatabaseReference = Reference;
-export type DatabaseQuery = Query;
+export type DatabaseQuery = database.Query;
 export type QueryReference = DatabaseReference | DatabaseQuery;
 export type PathReference = QueryReference | string;