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

Author: jamesdaniels

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 = {