Cleaning things up

Author: jamesdaniels

package.json

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

src/analytics/analytics.ts

@@ -1,13 +1,18 @@
 import { Injectable, Inject, Optional, NgZone, InjectionToken } from '@angular/core';
-import { Observable, from, of } from 'rxjs';
-import { map, switchMap, tap, filter } from 'rxjs/operators';
+import { Observable, from } from 'rxjs';
+import { map, tap, filter, withLatestFrom } from 'rxjs/operators';
 import { FirebaseAppConfig, FirebaseOptions, runOutsideAngular } from '@angular/fire';
-import { Router, NavigationEnd } from '@angular/router';
+import { Router, NavigationEnd, ActivationEnd } from '@angular/router';
 import { FirebaseAnalytics, FIREBASE_OPTIONS, FIREBASE_APP_NAME, _firebaseAppFactory } from '@angular/fire';
 
 export const AUTOMATICALLY_SET_CURRENT_SCREEN = new InjectionToken<boolean>('angularfire2.analytics.setCurrentScreen');
 export const ANALYTICS_COLLECTION_ENABLED = new InjectionToken<boolean>('angularfire2.analytics.analyticsCollectionEnabled');
 export const AUTOMATICALLY_TRACK_USER_IDENTIFIER = new InjectionToken<boolean>('angularfire2.analytics.trackUserIdentifier');
+export const APP_VERSION = new InjectionToken<string>('angularfire2.analytics.appVersion');
+export const APP_NAME = new InjectionToken<string>('angularfire2.analytics.appName');
+
+export const DEFAULT_APP_VERSION = '?';
+export const DEFAULT_APP_NAME = 'Angular App';
 
 @Injectable()
 export class AngularFireAnalytics {
@@ -24,45 +29,46 @@ export class AngularFireAnalytics {
     @Optional() @Inject(AUTOMATICALLY_SET_CURRENT_SCREEN) automaticallySetCurrentScreen:boolean|null,
     @Optional() @Inject(ANALYTICS_COLLECTION_ENABLED) analyticsCollectionEnabled:boolean|null,
     @Optional() @Inject(AUTOMATICALLY_TRACK_USER_IDENTIFIER) automaticallyTrackUserIdentifier:boolean|null,
-    private zone: NgZone
+    @Optional() @Inject(APP_VERSION) providedAppVersion:string|null,
+    @Optional() @Inject(APP_NAME) providedAppName:string|null,
+    zone: NgZone
   ) {
     // @ts-ignore zapping in the UMD in the build script
     const requireAnalytics = from(import('firebase/analytics'));
+    const app = _firebaseAppFactory(options, nameOrConfig);
 
     this.analytics = requireAnalytics.pipe(
-      map(() => _firebaseAppFactory(options, nameOrConfig)),
-      map(app => app.analytics()),
+      map(() => app.analytics()),
       tap(analytics => {
-        if (analyticsCollectionEnabled == false) { analytics.setAnalyticsCollectionEnabled(false) }
+        if (analyticsCollectionEnabled === false) { analytics.setAnalyticsCollectionEnabled(false) }
       }),
       runOutsideAngular(zone)
     );
 
     if (router && automaticallySetCurrentScreen !== false) {
-      this.analytics.pipe(
-        switchMap(analytics =>
-          router.events.pipe(
-            filter<NavigationEnd>(e => e instanceof NavigationEnd),
-            tap(e => console.log(e)),
-            tap(e => analytics.setCurrentScreen(e.url))
-          )
-        )
+      const app_name = providedAppName || DEFAULT_APP_NAME;
+      const app_version = providedAppVersion || DEFAULT_APP_VERSION;
+      const activationEndEvents = router.events.pipe(filter<ActivationEnd>(e => e instanceof ActivationEnd));
+      const navigationEndEvents = router.events.pipe(filter<NavigationEnd>(e => e instanceof NavigationEnd));
+      navigationEndEvents.pipe(
+        withLatestFrom(activationEndEvents, this.analytics),
+        tap(([navigationEnd, activationEnd, analytics]) => {
+          const url = navigationEnd.url;
+          const screen_name = activationEnd.snapshot.routeConfig && activationEnd.snapshot.routeConfig.path || undefined;
+          const outlet = activationEnd.snapshot.outlet;
+          analytics.logEvent("screen_view", { app_name, app_version, screen_name, outlet, url });
+          // TODO when is screen_name undefined?
+          analytics.setCurrentScreen(screen_name || url, { global: outlet == "primary" })
+        }),
+        runOutsideAngular(zone)
       ).subscribe();
     }
 
-    if (automaticallyTrackUserIdentifier !== false) {
-      this.analytics.pipe(
-        switchMap(analytics => {
-          if (analytics.app.auth) {
-            const auth = analytics.app.auth();
-            return new Observable<firebase.User|null>(auth.onAuthStateChanged.bind(auth)).pipe(
-              tap(user => console.log("uid", user && user.uid)),
-              tap(user => user ? analytics.setUserId(user.uid) : analytics.setUserId(null!))
-            )
-          } else {
-            return of()
-          }
-        }),
+    // TODO do something other than just check auth presence, what if it's lazy loaded?
+    if (app.auth && automaticallyTrackUserIdentifier !== false) {
+      new Observable<firebase.User|null>(app.auth().onAuthStateChanged.bind(app.auth())).pipe(
+        withLatestFrom(this.analytics),
+        tap(([user, analytics]) => analytics.setUserId(user ? user.uid : null!, { global: true })),
         runOutsideAngular(zone)
       ).subscribe()
     }

src/remote-config/remote-config.ts

@@ -4,6 +4,9 @@ import { map, switchMap, tap } from 'rxjs/operators';
 import { FirebaseAppConfig, FirebaseOptions, FIREBASE_OPTIONS, FIREBASE_APP_NAME } from '@angular/fire';
 import { remoteConfig } from 'firebase/app';
 
+// @ts-ignore
+import firebase from 'firebase/app';
+
 export interface DefaultConfig {[key:string]: string|number|boolean};
 
 export const REMOTE_CONFIG_SETTINGS = new InjectionToken<remoteConfig.Settings>('angularfire2.remoteConfig.settings');
@@ -30,10 +33,14 @@ export class AngularFireRemoteConfig {
     @Optional() @Inject(DEFAULT_CONFIG) defaultConfig:DefaultConfig|null,
     private zone: NgZone
   ) {
+    // import('firebase/remote-config') isn't working for some reason...
+    // it might have something to do with https://github.com/firebase/firebase-js-sdk/pull/2229
+    // import from @firebase/remote-config so I can manually register on the Firebase instance
     // @ts-ignore zapping in the UMD in the build script
-    const requireRemoteConfig = from(import('firebase/remote-config'));
+    const requireRemoteConfig = from(import('@firebase/remote-config'));
 
     this.remoteConfig = requireRemoteConfig.pipe(
+      map(rc => rc.registerRemoteConfig(firebase)),
       map(() => _firebaseAppFactory(options, nameOrConfig)),
       map(app => app.remoteConfig()),
       tap(rc => {

tools/build.js

@@ -30,6 +30,7 @@ const GLOBALS = {
   'firebase/functions': 'firebase',
   'firebase/performance': 'firebase',
   'firebase/remote-config': 'firebase',
+  '@firebase/remote-config': 'firebase',
   'firebase/storage': 'firebase',
   '@angular/fire': 'angularfire2',
   '@angular/fire/auth': 'angularfire2.auth',