fix(various): NG 10 fixes, Storage & FCM regressions (#2522)

* Use navigator serviceWorker for notifications, as FCM seems to be having trouble with RXJS & Angular
* Use more of the `registerX` hacks to work around ngcc tree-shaking. Tapping also seems to help, race condition maybe?
* Port the sample app to NG 10
* Add all the firebase packages to the Universal externals, having a bunch of problems with that
* Experimenting with overriding the legacy packaging choices of the JS SDK with `ngcc.config` in the sample app, should add to the `ng add` schematic if it proves workable
* FCM broke in a minor at some point, getToken now prompts for permission; work around this break for now
* Firebase Auth seems to be firing an initial null more often now, add the getRedirectResult work-around for now
* Firebase Auth is now failing to load in the server environment entirely, work around by returning `of(null)`
* Storage is not firing the last snapshot state before completion, making this API difficult to work with, fixed

Author: jamesdaniels

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular/fire",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "The official library of Firebase and Angular.",
   "private": true,
   "scripts": {

sample/browserslist renamed to sample/.browserslistrc

@@ -21,7 +21,9 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest",
+              "src/firebase-messaging-sw.js"
             ],
             "styles": [
               "src/styles.css"
@@ -55,7 +57,9 @@
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             }
           }
         },
@@ -85,7 +89,8 @@
             "karmaConfig": "karma.conf.js",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "src/styles.css"
@@ -124,9 +129,23 @@
             "outputPath": "dist/sample/server",
             "main": "server.ts",
             "tsConfig": "tsconfig.server.json",
-            "bundleDependencies": false,
+            "bundleDependencies": true,
             "externalDependencies": [
-              "@firebase/firestore"
+              "firebase",
+              "@firebase/app",
+              "@firebase/analytics",
+              "@firebase/app",
+              "@firebase/auth",
+              "@firebase/component",
+              "@firebase/database",
+              "@firebase/firestore",
+              "@firebase/functions",
+              "@firebase/installations",
+              "@firebase/messaging",
+              "@firebase/storage",
+              "@firebase/performance",
+              "@firebase/remote-config",
+              "@firebase/util"
             ]
           },
           "configurations": {

sample/angular.json

@@ -0,0 +1,72 @@
+module.exports = {
+    packages: {
+      "firebase": {
+        entryPoints: {
+          ".": { override: { main: undefined, browser: undefined } },
+          "./analytics": { override: { main: undefined, browser: undefined } },
+          "./app": {override: { main: undefined, browser: undefined } },
+          "./auth": {override: { main: undefined, browser: undefined } },
+          "./database": { override: { main: undefined, browser: undefined } },
+          "./firestore": { override: { main: undefined, browser: undefined } },
+          "./functions": { override: { main: undefined, browser: undefined } },
+          "./installations": { override: { main: undefined, browser: undefined } },
+          "./storage": { override: { main: undefined, browser: undefined } },
+          "./performance": { override: { main: undefined, browser: undefined } },
+          "./remote-config": { override: { main: undefined, browser: undefined } },
+        },
+        generateDeepReexports: true
+      },
+      "@firebase/analytics": {
+        entryPoints: { ".": { override : { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/app": {
+        entryPoints: { ".": { override : { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/auth": {
+        entryPoints: { ".": { override : { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/component": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/database": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/firestore": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/functions": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/installations": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/messaging": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/storage": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/performance": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/remote-config": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      },
+      "@firebase/util": {
+        entryPoints: { ".": { override: { main: undefined, browser: undefined } } },
+        ignorableDeepImportMatchers: [ /@firebase\/app-types\/private/ ]
+      }
+    }
+}  

sample/ngcc.config.js

@@ -0,0 +1,29 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    }, {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}

sample/ngsw-config.json

@@ -15,30 +15,30 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.0",
-    "@angular/common": "~9.1.0",
-    "@angular/compiler": "~9.1.0",
-    "@angular/core": "~9.1.0",
+    "@angular/animations": "~10.0.0",
+    "@angular/common": "~10.0.0",
+    "@angular/compiler": "~10.0.0",
+    "@angular/core": "~10.0.0",
     "@angular/fire": "../dist/packages-dist",
-    "@angular/forms": "~9.1.0",
-    "@angular/platform-browser": "~9.1.0",
-    "@angular/platform-browser-dynamic": "~9.1.0",
-    "@angular/platform-server": "~9.1.0",
-    "@angular/router": "~9.1.0",
-    "@angular/service-worker": "~9.1.0",
+    "@angular/forms": "~10.0.0",
+    "@angular/platform-browser": "~10.0.0",
+    "@angular/platform-browser-dynamic": "~10.0.0",
+    "@angular/platform-server": "~10.0.0",
+    "@angular/router": "~10.0.0",
+    "@angular/service-worker": "^10.0.0",
     "@nguniversal/express-engine": "~9.1.0",
     "firebase": "^7.13.2",
     "proxy-polyfill": "^0.3.1",
     "rxjs": "~6.5.4",
-    "tslib": "^1.10.0",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/architect": "~0.901.0",
-    "@angular-devkit/build-angular": "~0.901.0",
-    "@angular/cli": "~9.1.0",
-    "@angular/compiler-cli": "~9.1.0",
-    "@angular/language-service": "~9.1.0",
+    "@angular-devkit/build-angular": "~0.1000.0",
+    "@angular/cli": "~10.0.0",
+    "@angular/compiler-cli": "~10.0.0",
+    "@angular/language-service": "~10.0.0",
     "@nguniversal/builders": "^9.1.0",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
@@ -53,15 +53,15 @@
     "inquirer": "^6.2.2",
     "inquirer-autocomplete-prompt": "^1.0.1",
     "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.3.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
-    "protractor": "~5.4.3",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~3.3.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
-    "tslint": "~5.18.0",
-    "typescript": "~3.7.5"
+    "tslint": "~6.1.0",
+    "typescript": "~3.9.5"
   }
 }

sample/package.json

@@ -31,6 +31,7 @@ import { StorageComponent } from './storage/storage.component';
 import { RemoteConfigComponent } from './remote-config/remote-config.component';
 import { HomeComponent } from './home/home.component';
 import { AuthComponent } from './auth/auth.component';
+import { MessagingComponent } from './messaging/messaging.component';
 
 const shouldUseEmulator = () => false;
 
@@ -42,7 +43,8 @@ const shouldUseEmulator = () => false;
     DatabaseComponent,
     RemoteConfigComponent,
     HomeComponent,
-    AuthComponent
+    AuthComponent,
+    MessagingComponent
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

sample/src/app/app.module.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, PLATFORM_ID } from '@angular/core';
 import { AngularFireAuth } from '@angular/fire/auth';
-import { auth as rawAuth } from 'firebase/app';
+import firebase from 'firebase/app';
 import { Subscription } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { map, tap } from 'rxjs/operators';
 import { trace } from '@angular/fire/performance';
+import { Inject } from '@angular/core';
+import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'app-auth',
@@ -19,29 +21,33 @@ import { trace } from '@angular/fire/performance';
 })
 export class AuthComponent implements OnInit, OnDestroy {
 
-  private readonly userDisposable: Subscription;
+  private readonly userDisposable: Subscription|undefined;
 
   showLoginButton = false;
   showLogoutButton = false;
 
-  constructor(public readonly auth: AngularFireAuth) {
-    this.userDisposable = this.auth.authState.pipe(
-      trace('auth'),
-      map(u => !!u)
-    ).subscribe(isLoggedIn => {
-      this.showLoginButton = !isLoggedIn;
-      this.showLogoutButton = isLoggedIn;
-    });
+  constructor(public readonly auth: AngularFireAuth, @Inject(PLATFORM_ID) platformId: object) {
+    if (!isPlatformServer(platformId)) {
+      this.userDisposable = this.auth.authState.pipe(
+        trace('auth'),
+        map(u => !!u)
+      ).subscribe(isLoggedIn => {
+        this.showLoginButton = !isLoggedIn;
+        this.showLogoutButton = isLoggedIn;
+      });
+    }
   }
 
   ngOnInit(): void { }
 
   ngOnDestroy(): void {
-    this.userDisposable.unsubscribe();
+    if (this.userDisposable) {
+      this.userDisposable.unsubscribe();
+    }
   }
 
   login() {
-    this.auth.signInWithPopup(new rawAuth.GoogleAuthProvider());
+    this.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
   }
 
   logout() {

sample/src/app/auth/auth.component.ts

@@ -11,6 +11,7 @@ import { FirebaseApp } from '@angular/fire';
     <app-remote-config></app-remote-config>
     <app-storage></app-storage>
     <app-auth></app-auth>
+    <app-messaging></app-messaging>
   `,
   styles: [``]
 })

sample/src/app/home/home.component.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagingComponent } from './messaging.component';
+
+describe('MessagingComponent', () => {
+  let component: MessagingComponent;
+  let fixture: ComponentFixture<MessagingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessagingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessagingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

sample/src/app/messaging/messaging.component.spec.ts

@@ -0,0 +1,45 @@
+import { Component, OnInit } from '@angular/core';
+import { AngularFireMessaging } from '@angular/fire/messaging';
+import { trace } from '@angular/fire/performance';
+import { Observable, fromEvent } from 'rxjs';
+import { tap, map, filter } from 'rxjs/operators';
+import * as firebase from 'firebase/app';
+import 'firebase/messaging';
+import { SwPush } from '@angular/service-worker';
+
+@Component({
+  selector: 'app-messaging',
+  template: `
+    <p>
+      Messaging!
+      {{ token$ | async | json }}
+      {{ message$ | async | json }}
+      <button (click)="request()" *ngIf="showRequest">Request FCM token</button>
+    </p>
+  `,
+  styles: []
+})
+export class MessagingComponent implements OnInit {
+
+  token$: Observable<any>;
+  message$: Observable<any>;
+  showRequest = false;
+
+  constructor(public readonly messaging: AngularFireMessaging, swPush: SwPush) {
+    messaging.usePublicVapidKey('BIDPctnXHQDIjcOXxDS6qQcz-QTws7bL8v7UPgFnS1Ky5BZL3jS3-XXfxwRHmAUMOk7pXme7ttOBvVoIfX57PEo').then(() => {
+      this.message$ = messaging.messages;
+      this.token$ = messaging.tokenChanges.pipe(
+        trace('token'),
+        tap(token => this.showRequest = !token)
+      );
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  request() {
+    this.messaging.requestPermission.subscribe(console.log, console.error);
+  }
+
+}