chore(build): Fix build script and Analytics services

Author: davideast

src/analytics/analytics.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, InjectionToken, NgZone, Optional, PLATFORM_ID } from '@angular/core';
-import { EMPTY, of } from 'rxjs';
+import { EMPTY, Observable, of } from 'rxjs';
 import { isPlatformBrowser } from '@angular/common';
 import { map, shareReplay, switchMap, observeOn } from 'rxjs/operators';
 import {
@@ -9,7 +9,7 @@ import {
   ɵapplyMixins,
   FirebaseApp
 } from '@angular/fire';
-import { Analytics, setAnalyticsCollectionEnabled } from 'firebase/analytics';
+import { getAnalytics, Analytics, setAnalyticsCollectionEnabled } from 'firebase/analytics';
 import { proxyPolyfillCompat } from './base';
 import { ɵfetchInstance } from '@angular/fire';
 
@@ -41,6 +41,7 @@ export class AngularFireAnalytics {
 
   private measurementId: string;
   private analyticsInitialized: Promise<void> = new Promise(() => {});
+  analytics$: Observable<Analytics>;
 
   async updateConfig(config: Config) {
     await this.analyticsInitialized;
@@ -142,16 +143,16 @@ export class AngularFireAnalytics {
 
     }
 
-    const analytics = of(undefined).pipe(
+    this.analytics$ = of(undefined).pipe(
       observeOn(new ɵAngularFireSchedulers(zone).outsideAngular),
-      switchMap(() => isPlatformBrowser(platformId) ? zone.runOutsideAngular(() => import('firebase/analytics')) : EMPTY),
+      // switchMap(() => isPlatformBrowser(platformId) ? zone.runOutsideAngular(() => import('firebase/analytics')) : EMPTY),
       // SEMVER can switch to isSupported() when we only target v8
       // switchMap(() => isSupported().then(it => it, () => false)),
       // TODO server-side investigate use of the Universal Analytics API
       // switchMap(supported => supported ? of(undefined) : EMPTY),
       map(() => {
         return ɵfetchInstance(`analytics`, 'AngularFireAnalytics', app, () => {
-          const analytics = app.analytics();
+          const analytics = getAnalytics(app);
           if (analyticsCollectionEnabled === false) {
             setAnalyticsCollectionEnabled(analytics, false);
           }
@@ -161,9 +162,8 @@ export class AngularFireAnalytics {
       shareReplay({ bufferSize: 1, refCount: false })
     );
 
-    // TODO(davideast, jamesdaniels): Hardcore zone patch or just patch here?
-    return ɵlazySDKProxy(this, analytics, zone);
-
+    // TODO(team): Hardcore zone patch or just patch here?
+    return ɵlazySDKProxy(this, this.analytics$, zone);
   }
 
 }

src/analytics/screen-tracking.service.ts

@@ -14,6 +14,7 @@ import { AngularFireAnalytics } from './analytics';
 import { Title } from '@angular/platform-browser';
 import { isPlatformBrowser } from '@angular/common';
 import { UserTrackingService } from './user-tracking.service';
+import { logEvent } from 'firebase/analytics';
 
 const FIREBASE_EVENT_ORIGIN_KEY = 'firebase_event_origin';
 const FIREBASE_PREVIOUS_SCREEN_CLASS_KEY = 'firebase_previous_class';
@@ -143,11 +144,19 @@ export class ScreenTrackingService implements OnDestroy {
               ...current
             } : current
           ),
-          switchMap(async params => {
+          mergeMap(([prior, current]) => {
+            return analytics.analytics$.pipe(
+              map(analytics => {
+                return { prior, current, analytics };
+              })
+            );
+          }),
+          switchMap(async ({ prior, current, analytics }) => {
             if (userTrackingService) {
               await userTrackingService.initialized;
             }
-            return await analytics.logEvent(SCREEN_VIEW_EVENT, params);
+            // TODO(team): Why do we need to cast a string to a string here?
+            return await logEvent(analytics, SCREEN_VIEW_EVENT as string, { prior, current });
           })
         ))
       ).subscribe();

src/analytics/user-tracking.service.ts

@@ -3,6 +3,9 @@ import { Inject, Injectable, NgZone, OnDestroy, PLATFORM_ID } from '@angular/cor
 import { AngularFireAnalytics } from './analytics';
 import { AngularFireAuth } from '@angular/fire/auth';
 import { Subscription } from 'rxjs';
+import { switchMap, map } from 'rxjs/operators';
+import { setUserId, logEvent } from 'firebase/analytics';
+import { getAdditionalUserInfo } from 'firebase/auth';
 
 @Injectable()
 export class UserTrackingService implements OnDestroy {
@@ -22,20 +25,35 @@ export class UserTrackingService implements OnDestroy {
     if (!isPlatformServer(platformId)) {
       let resolveInitialized;
       this.initialized = zone.runOutsideAngular(() => new Promise(resolve => resolveInitialized = resolve));
+
       this.disposables = [
-          auth.authState.subscribe(user => {
-            analytics.setUserId(user?.uid);
+          analytics.analytics$.pipe(
+            switchMap(analytics => {
+              return auth.authState.pipe(
+                map(user => ({ user, analytics }))
+              );
+            })
+          ).subscribe(({ user, analytics }) => {
+            setUserId(analytics, user?.uid);
             resolveInitialized();
           }),
-          auth.credential.subscribe(credential => {
+
+          analytics.analytics$.pipe(
+            switchMap(analytics => {
+              return auth.credential.pipe(
+                map(credential => ({ credential, analytics }))
+              );
+            })
+          ).subscribe(({ credential, analytics }) => {
             if (credential) {
-              const method = credential.user.isAnonymous ? 'anonymous' : credential.additionalUserInfo.providerId;
-              if (credential.additionalUserInfo.isNewUser) {
-                analytics.logEvent('sign_up', { method });
+              const additionalUserInfo = getAdditionalUserInfo(credential);
+              const method = credential.user.isAnonymous ? 'anonymous' : additionalUserInfo.providerId;
+              if (additionalUserInfo.isNewUser) {
+                logEvent(analytics, 'sign_up', { method });
               }
-              analytics.logEvent('login', { method });
+              logEvent(analytics, 'login', { method });
             }
-          })
+          }),
       ];
     } else {
       this.initialized = Promise.resolve();

tools/build.ts

@@ -4,7 +4,12 @@ import { prettySize } from 'pretty-size';
 import { sync as gzipSync } from 'gzip-size';
 import { dirname, join } from 'path';
 import { keys as tsKeys } from 'ts-transformer-keys';
-import firebase from 'firebase/app';
+import { Analytics } from 'firebase/analytics';
+import { Auth } from 'firebase/auth';
+import { FirebaseMessaging } from 'firebase/messaging';
+import { FirebasePerformance } from 'firebase/performance';
+import { Functions } from 'firebase/functions';
+import { RemoteConfig } from 'firebase/remote-config';
 
 // TODO infer these from the package.json
 const MODULES = [
@@ -18,12 +23,12 @@ const ENTRY_NAMES = MODULES.map(m => m === 'core' ? '@angular/fire' : `@angular/
 
 function proxyPolyfillCompat() {
   const defaultObject = {
-    analytics: tsKeys<firebase.analytics.Analytics>(),
-    auth: tsKeys<firebase.auth.Auth>(),
-    functions: tsKeys<firebase.functions.Functions>(),
-    messaging: tsKeys<firebase.messaging.Messaging>(),
-    performance: tsKeys<firebase.performance.Performance>(),
-    'remote-config': tsKeys<firebase.remoteConfig.RemoteConfig>(),
+    analytics: tsKeys<Analytics>(),
+    auth: tsKeys<Auth>(),
+    functions: tsKeys<Functions>(),
+    messaging: tsKeys<FirebaseMessaging>(),
+    performance: tsKeys<FirebasePerformance>(),
+    'remote-config': tsKeys<RemoteConfig>(),
   };
 
   return Promise.all(Object.keys(defaultObject).map(module =>