fix(core): proxy-polyfill support and various other small fixes (#2633)

* Make PerformanceMonitoringService tree-shakable
* Shouldn't need to but await AgnularFirePerformance/Analytics to make them eager
* Support proxy-polyfill on the lazy classes by adding the methods to prototype at build-time (via `ts-transformer-keys`)
* Use indexOf > -1 rather than includes, so another polyfill isnt needed
* Adding logger/compat to the cloud function genreator
* npx not needed in package.json

Co-authored-by: Alex <[email protected]>

Author: jamesdaniels

.gitignore

@@ -18,4 +18,5 @@ test/ng-build/**/yarn.lock
 tools/build.js
 coverage
 *.log
-api-*.json
+api-*.json
+src/**/base.ts

package.json

@@ -1,19 +1,19 @@
 {
   "name": "@angular/fire",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "description": "The official library of Firebase and Angular.",
   "private": true,
   "scripts": {
     "test": "npm run test:node",
-    "test:watch": "npx firebase emulators:exec --project=angularfire2-test \"npx ng test --watch=true --browsers=Chrome\"",
-    "test:chrome": "npx firebase emulators:exec --project=angularfire2-test \"npx ng test --watch=false --browsers=Chrome\"",
-    "test:chrome-headless": "npx firebase emulators:exec --project=angularfire2-test \"npx ng test --watch=false --browsers=ChromeHeadless\"",
-    "lint": "npx ng lint",
-    "test:node": "npx tsc -p tsconfig.jasmine.json; cp ./dist/packages-dist/schematics/versions.json ./dist/out-tsc/jasmine/schematics && npx firebase emulators:exec --project=angularfire2-test \"node -r tsconfig-paths/register ./tools/jasmine.js\"",
+    "test:watch": "firebase emulators:exec --project=angularfire2-test \"ng test --watch=true --browsers=Chrome\"",
+    "test:chrome": "firebase emulators:exec --project=angularfire2-test \"ng test --watch=false --browsers=Chrome\"",
+    "test:chrome-headless": "firebase emulators:exec --project=angularfire2-test \"ng test --watch=false --browsers=ChromeHeadless\"",
+    "lint": "ng lint",
+    "test:node": "tsc -p tsconfig.jasmine.json; cp ./dist/packages-dist/schematics/versions.json ./dist/out-tsc/jasmine/schematics && firebase emulators:exec --project=angularfire2-test \"node -r tsconfig-paths/register ./tools/jasmine.js\"",
     "test:typings": "node ./tools/run-typings-test.js",
     "test:build": "bash ./test/ng-build/build.sh",
     "test:all": "npm run test:node && npm run test:chrome-headless && npm run test:typings && npm run test:build",
-    "build": "tsc tools/build.ts; node ./tools/build.js",
+    "build": "ttsc -p tsconfig.build.json; node ./tools/build.js",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1"
   },
   "husky": {
@@ -110,9 +110,11 @@
     "systemjs": "^0.19.16",
     "systemjs-builder": "^0.15.7",
     "traceur": "0.0.96",
+    "ts-transformer-keys": "^0.4.2",
     "tsconfig-paths": "^3.8.0",
     "tsickle": "^0.39.1",
     "tslint": "~6.1.0",
+    "ttypescript": "^1.5.12",
     "typedoc": "^0.16.4",
     "typescript": "~3.9.7"
   },

sample/.browserslistrc

@@ -9,4 +9,5 @@
 last 2 versions
 Firefox ESR
 not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-10
+IE 11

sample/package.json

@@ -7,7 +7,9 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
+    "deploy": "ng deploy",
     "dev:ssr": "ng run sample:serve-ssr",
+    "bust": "rm -rf node_modules/@angular/fire && yarn cache clean @angular/fire && yarn add ../dist/packages-dist",
     "serve:ssr": "node dist/sample/server/main.js",
     "build:ssr": "ng build --prod && ng run sample:server:production",
     "prerender": "ng run sample:prerender"
@@ -26,11 +28,13 @@
     "@angular/router": "~10.2.1",
     "@angular/service-worker": "^10.2.1",
     "@nguniversal/express-engine": "~10.1.0",
+    "core-js": "^3.6.5",
     "firebase": "^8.0.0",
     "first-input-delay": "^0.1.3",
     "proxy-polyfill": "^0.3.2",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.1",
+    "whatwg-fetch": "^3.4.1",
     "zone.js": "0.10.3"
   },
   "devDependencies": {
@@ -65,4 +69,4 @@
     "tslint": "~6.1.3",
     "typescript": "~3.9.7"
   }
-}
+}

sample/src/app/app.module.ts

@@ -7,7 +7,6 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 
 import { AngularFireModule } from '@angular/fire';
-import { AngularFireStorageModule } from '@angular/fire/storage';
 
 import {
   AngularFireAnalyticsModule,
@@ -17,13 +16,13 @@ import {
 } from '@angular/fire/analytics';
 
 import { FirestoreComponent } from './firestore/firestore.component';
-
 import { AngularFireDatabaseModule, URL as DATABASE_URL } from '@angular/fire/database';
-import { AngularFireAuthModule } from '@angular/fire/auth';
 import { AngularFirestoreModule, SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
+import { AngularFireStorageModule } from '@angular/fire/storage';
+import { AngularFireAuthModule } from '@angular/fire/auth';
 import { AngularFireMessagingModule } from '@angular/fire/messaging';
 import { AngularFireFunctionsModule, ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/functions';
-import { AngularFireRemoteConfigModule, SETTINGS as REMOTE_CONFIG_SETTINGS } from '@angular/fire/remote-config';
+import { AngularFireRemoteConfigModule, SETTINGS as REMOTE_CONFIG_SETTINGS, DEFAULTS as REMOTE_CONFIG_DEFAULTS } from '@angular/fire/remote-config';
 import { AngularFirePerformanceModule, PerformanceMonitoringService } from '@angular/fire/performance';
 import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';
 import { DatabaseComponent } from './database/database.component';
@@ -53,31 +52,35 @@ const shouldUseEmulator = () => false;
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     AngularFireModule.initializeApp(environment.firebase),
     AngularFireStorageModule,
-    AngularFireAnalyticsModule,
-    AngularFireAuthModule,
     AngularFireDatabaseModule,
     AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
+    AngularFireAuthModule,
+    AngularFireRemoteConfigModule,
     AngularFireMessagingModule,
+    // AngularFireAnalyticsModule, // TODO having trouble getting this to work in IE
     AngularFireFunctionsModule,
-    AngularFireRemoteConfigModule,
-    AngularFirePerformanceModule,
+    // AngularFirePerformanceModule, // TODO having trouble getting this to work in IE
     AngularFireAuthGuardModule
   ],
   providers: [
-    UserTrackingService,
-    ScreenTrackingService,
-    PerformanceMonitoringService,
-    {
-      provide: ANALYTICS_DEBUG_MODE,
-      useFactory: () => isDevMode()
-    },
+    /*
+      TODO Analytics and Performance monitoring aren't working in IE, sort this out
+      UserTrackingService,
+      ScreenTrackingService,
+      PerformanceMonitoringService,
+      {
+        provide: ANALYTICS_DEBUG_MODE,
+        useFactory: () => isDevMode()
+      },
+    */
     {
       provide: DATABASE_URL,
       useFactory: () => shouldUseEmulator() ? `http://localhost:9000?ns=${environment.firebase.projectId}` : undefined
     },
     { provide: FIRESTORE_SETTINGS, useFactory: () => shouldUseEmulator() ? { host: 'localhost:8080', ssl: false } : {} },
     { provide: FUNCTIONS_ORIGIN, useFactory: () => shouldUseEmulator() ? 'http://localhost:9999' : undefined },
-    { provide: REMOTE_CONFIG_SETTINGS, useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {} }
+    { provide: REMOTE_CONFIG_SETTINGS, useFactory: () => isDevMode() ? { minimumFetchIntervalMillis: 10_000 } : {} },
+    { provide: REMOTE_CONFIG_DEFAULTS, useValue: { background_color: 'red' } },
   ],
   bootstrap: [AppComponent]
 })

sample/src/app/database/database.component.ts

@@ -1,9 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
 import { AngularFireDatabase } from '@angular/fire/database';
-import { Observable } from 'rxjs';
+import { EMPTY, Observable } from 'rxjs';
 import { makeStateKey, TransferState } from '@angular/platform-browser';
 import { startWith, tap } from 'rxjs/operators';
 import { trace } from '@angular/fire/performance';
+import { isPlatformServer } from '@angular/common';
 
 @Component({
   selector: 'app-database',
@@ -19,14 +20,19 @@ export class DatabaseComponent implements OnInit {
 
   public readonly testObjectValue$: Observable<any>;
 
-  constructor(state: TransferState, database: AngularFireDatabase) {
-    const doc = database.object('test');
-    const key = makeStateKey(doc.query.toString());
-    const existing = state.get(key, undefined);
-    this.testObjectValue$ = doc.valueChanges().pipe(
-      trace('database'),
-      existing ? startWith(existing) : tap(it => state.set(key, it))
-    );
+  constructor(state: TransferState, database: AngularFireDatabase, @Inject(PLATFORM_ID) platformId: object) {
+    // TODO fix the Zone.js issue with AngularFireDatabase
+    if (isPlatformServer(platformId)) {
+      this.testObjectValue$ = EMPTY;
+    } else {
+      const doc = database.object('test');
+      const key = makeStateKey(doc.query.toString());
+      const existing = state.get(key, undefined);
+      this.testObjectValue$ = doc.valueChanges().pipe(
+        trace('database'),
+        existing ? startWith(existing) : tap(it => state.set(key, it))
+      );
+    }
   }
 
   ngOnInit(): void {

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

@@ -8,10 +8,10 @@ import { FirebaseApp } from '@angular/fire';
     {{ firebaseApp.name }}
     <app-database></app-database>
     <app-firestore></app-firestore>
-    <app-remote-config></app-remote-config>
     <app-storage></app-storage>
     <app-auth></app-auth>
-    <app-messaging></app-messaging>
+    <app-remote-config></app-remote-config>
+    <!-- TODO get working with Firebase 8 <app-messaging></app-messaging>-->
   `,
   styles: [``]
 })

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

@@ -26,6 +26,8 @@ export class MessagingComponent implements OnInit {
 
   constructor(public readonly messaging: AngularFireMessaging, readonly swpush: SwPush) {
     swpush.messages.subscribe(it => console.log('swpush', it));
+    /*
+    TODO get this sorted back out with Firebase 8
     messaging.usePublicVapidKey(environment.vapidKey).then(async () => {
       if (navigator && navigator.serviceWorker) {
         const registration = await navigator.serviceWorker.getRegistration();
@@ -38,7 +40,7 @@ export class MessagingComponent implements OnInit {
         trace('token'),
         tap(token => this.showRequest = !token)
       );
-    });
+    });*/
   }
 
   ngOnInit(): void {

sample/src/polyfills.ts

@@ -21,6 +21,10 @@
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.
 
+import 'proxy-polyfill/proxy.min.js';
+import 'core-js/stable';
+import 'whatwg-fetch';
+
 /**
  * Web Animations `@angular/platform-browser/animations`
  * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
@@ -61,5 +65,3 @@ import 'zone.js/dist/zone'; // Included with Angular CLI.
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */
-
-import 'proxy-polyfill/proxy.min.js';

sample/yarn.lock

@@ -224,7 +224,7 @@
     tslib "^2.0.0"
 
 "@angular/fire@../dist/packages-dist":
-  version "6.0.3"
+  version "6.0.5"
   dependencies:
     tslib "^2.0.0"
 
@@ -3954,7 +3954,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.4.tgz#440a83536b458114b9cb2ac1580ba377dc470647"
   integrity sha512-4paDGScNgZP2IXXilaffL9X7968RuvwlkK3xWtZRVqgd8SYNiVKRJvkFd1aqqEuPfN7E68ZHEp9hDj6lHj4Hyw==
 
-[email protected]:
+[email protected], core-js@^3.6.5:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
   integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
@@ -12577,6 +12577,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
   integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
 
+whatwg-fetch@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz#e5f871572d6879663fa5674c8f833f15a8425ab3"
+  integrity sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==
+
 whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"

sample/~ngcc.config.js

@@ -13,6 +13,6 @@ export class AngularFireAnalyticsModule {
   ) {
     // calling anything on analytics will eagerly load the SDK
     // tslint:disable-next-line:no-unused-expression
-    analytics.app;
+    analytics.app.then(() => {});
   }
 }

src/analytics/analytics.module.ts

@@ -10,9 +10,11 @@ import {
   FIREBASE_OPTIONS,
   FIREBASE_APP_NAME,
   ɵfirebaseAppFactory,
-  ɵPromiseProxy
+  ɵPromiseProxy,
+  ɵapplyMixins
 } from '@angular/fire';
 import firebase from 'firebase/app';
+import { proxyPolyfillCompat } from './base';
 
 export interface Config {
   [key: string]: any;
@@ -127,3 +129,5 @@ export class AngularFireAnalytics {
   }
 
 }
+
+ɵapplyMixins(AngularFireAnalytics, [proxyPolyfillCompat]);