Reworking things a bit

src/analytics/analytics.module.ts

@@ -1,11 +1,12 @@
-import { NgModule } from '@angular/core';
+import { NgModule, Optional } from '@angular/core';
+import { UserTrackingService, ScreenTrackingService } from './analytics.service';
 import { AngularFireAnalytics } from './analytics';
 
-@NgModule({
-  providers: [ AngularFireAnalytics ]
-})
+@NgModule()
 export class AngularFireAnalyticsModule {
-  constructor(_: AngularFireAnalytics) {
-    // DI inject Analytics here for the automatic data collection
-  } 
+  constructor(
+    analytics: AngularFireAnalytics,
+    @Optional() screenTracking: ScreenTrackingService,
+    @Optional() userTracking: UserTrackingService
+  ) { }
 }

src/analytics/analytics.service.ts

@@ -0,0 +1,100 @@
+import { Injectable, Inject, Optional, NgZone, OnDestroy, InjectionToken } from '@angular/core';
+import { Subscription, from, Observable, empty } from 'rxjs';
+import { filter, withLatestFrom, switchMap, map, tap } from 'rxjs/operators';
+import { Router, NavigationEnd, ActivationEnd } from '@angular/router';
+import { runOutsideAngular, _lazySDKProxy, _firebaseAppFactory } from '@angular/fire';
+import { AngularFireAnalytics } from './analytics';
+import { User } from 'firebase/app';
+
+export const AUTOMATICALLY_SET_CURRENT_SCREEN = new InjectionToken<boolean>('angularfire2.analytics.setCurrentScreen');
+export const AUTOMATICALLY_LOG_SCREEN_VIEWS = new InjectionToken<boolean>('angularfire2.analytics.logScreenViews');
+export const APP_VERSION = new InjectionToken<string>('angularfire2.analytics.appVersion');
+export const APP_NAME = new InjectionToken<string>('angularfire2.analytics.appName');
+
+const DEFAULT_APP_VERSION = '?';
+const DEFAULT_APP_NAME = 'Angular App';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ScreenTrackingService implements OnDestroy {
+
+    private disposable: Subscription|undefined;
+
+    constructor(
+      private analytics: AngularFireAnalytics,
+      private router:Router,
+      @Optional() @Inject(AUTOMATICALLY_SET_CURRENT_SCREEN) private automaticallySetCurrentScreen:boolean|null,
+      @Optional() @Inject(AUTOMATICALLY_LOG_SCREEN_VIEWS) private automaticallyLogScreenViews:boolean|null,
+      @Optional() @Inject(APP_VERSION) private providedAppVersion:string|null,
+      @Optional() @Inject(APP_NAME) private providedAppName:string|null,
+      private zone: NgZone
+    ) {
+        if (this.automaticallySetCurrentScreen !== false || this.automaticallyLogScreenViews !== false) {
+            const app_name = this.providedAppName || DEFAULT_APP_NAME;
+            const app_version = this.providedAppVersion || DEFAULT_APP_VERSION;
+            const activationEndEvents = this.router.events.pipe(filter<ActivationEnd>(e => e instanceof ActivationEnd));
+            const navigationEndEvents = this.router.events.pipe(filter<NavigationEnd>(e => e instanceof NavigationEnd));
+            this.disposable = navigationEndEvents.pipe(
+                withLatestFrom(activationEndEvents),
+                switchMap(([navigationEnd, activationEnd]) => {
+                    const url = navigationEnd.url;
+                    const screen_name = activationEnd.snapshot.routeConfig && activationEnd.snapshot.routeConfig.path || url;
+                    const outlet = activationEnd.snapshot.outlet;
+                    const component = activationEnd.snapshot.component;
+                    const ret = new Array<Promise<void>>();
+                    if (this.automaticallyLogScreenViews !== false) {
+                        if (component) {
+                            const screen_class = component.hasOwnProperty('name') && (component as any).name || component.toString();
+                            ret.push(this.analytics.logEvent("screen_view", { app_name, screen_class, app_version, screen_name, outlet, url }));
+                        } else if (activationEnd.snapshot.routeConfig && activationEnd.snapshot.routeConfig.loadChildren) {
+                            ret.push((activationEnd.snapshot.routeConfig.loadChildren as any)().then((child:any) => {
+                                const screen_class = child.name;
+                                console.log("logEvent", "screen_view", { app_name, screen_class, app_version, screen_name, outlet, url });
+                                return this.analytics.logEvent("screen_view", { app_name, screen_class, app_version, screen_name, outlet, url });
+                            }));
+                        } else {
+                            ret.push(this.analytics.logEvent("screen_view", { app_name, app_version, screen_name, outlet, url }));
+                        }
+                    }
+                    if (this.automaticallySetCurrentScreen !== false) {
+                        ret.push(this.analytics.setCurrentScreen(screen_name || url, { global: outlet == "primary" }));
+                    }
+                    return Promise.all(ret);
+                }),
+                runOutsideAngular(this.zone)
+            ).subscribe();
+        }
+    }
+
+    ngOnDestroy() {
+      if (this.disposable) { this.disposable.unsubscribe(); }
+    }
+
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class UserTrackingService implements OnDestroy {
+
+    private disposable: Subscription|undefined;
+
+    // TODO a user properties injector
+    constructor(
+        analytics: AngularFireAnalytics,
+        zone: NgZone
+    ) {
+        this.disposable = from(analytics.app).pipe(
+            // TODO can I hook into auth being loaded...
+            map(app => app.auth()),
+            switchMap(auth => auth ? new Observable<User>(auth.onAuthStateChanged.bind(auth)) : empty()),
+            switchMap(user => analytics.setUserId(user ? user.uid : null!, { global: true })),
+            runOutsideAngular(zone)
+        ).subscribe();
+    }
+
+    ngOnDestroy() {
+        if (this.disposable) { this.disposable.unsubscribe(); }
+    }
+}

src/analytics/analytics.ts

@@ -1,19 +1,10 @@
 import { Injectable, Inject, Optional, NgZone, InjectionToken } from '@angular/core';
-import { Observable, from } from 'rxjs';
-import { map, tap, filter, withLatestFrom, shareReplay } from 'rxjs/operators';
-import { Router, NavigationEnd, ActivationEnd } from '@angular/router';
+import { of } from 'rxjs';
+import { map, tap, shareReplay, switchMap } from 'rxjs/operators';
 import { FirebaseAppConfig, FirebaseOptions, runOutsideAngular, _lazySDKProxy, FirebaseAnalytics, FIREBASE_OPTIONS, FIREBASE_APP_NAME, _firebaseAppFactory } from '@angular/fire';
 import { analytics, app } from 'firebase';
 
-export const AUTOMATICALLY_SET_CURRENT_SCREEN = new InjectionToken<boolean>('angularfire2.analytics.setCurrentScreen');
-export const AUTOMATICALLY_LOG_SCREEN_VIEWS = new InjectionToken<boolean>('angularfire2.analytics.logScreenViews');
 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';
 
 // SEMVER: once we move to Typescript 3.6 use `PromiseProxy<analytics.Analytics>`
 type AnalyticsProxy = {
@@ -29,74 +20,30 @@ type AnalyticsProxy = {
 
 export interface AngularFireAnalytics extends AnalyticsProxy {};
 
-@Injectable()
+@Injectable({
+  providedIn: "root"
+})
 export class AngularFireAnalytics {
 
-  /**
-   * Firebase Analytics instance
-   */
-  private readonly analytics$: Observable<FirebaseAnalytics>;
-  private get analytics() { return this.analytics$.toPromise(); }
-
   constructor(
     @Inject(FIREBASE_OPTIONS) options:FirebaseOptions,
     @Optional() @Inject(FIREBASE_APP_NAME) nameOrConfig:string|FirebaseAppConfig|null|undefined,
-    @Optional() router:Router,
-    @Optional() @Inject(AUTOMATICALLY_SET_CURRENT_SCREEN) automaticallySetCurrentScreen:boolean|null,
-    @Optional() @Inject(AUTOMATICALLY_LOG_SCREEN_VIEWS) automaticallyLogScreenViews:boolean|null,
     @Optional() @Inject(ANALYTICS_COLLECTION_ENABLED) analyticsCollectionEnabled:boolean|null,
-    @Optional() @Inject(AUTOMATICALLY_TRACK_USER_IDENTIFIER) automaticallyTrackUserIdentifier:boolean|null,
-    @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, zone, nameOrConfig);
-
-    this.analytics$ = requireAnalytics.pipe(
-      map(() => app.analytics()),
+    const analytics = of(undefined).pipe(
+      // @ts-ignore zapping in the UMD in the build script
+      switchMap(() => zone.runOutsideAngular(() => import('firebase/analytics'))),
+      map(() => _firebaseAppFactory(options, zone, nameOrConfig)),
+      map(app => app.analytics()),
       tap(analytics => {
         if (analyticsCollectionEnabled === false) { analytics.setAnalyticsCollectionEnabled(false) }
       }),
       runOutsideAngular(zone),
       shareReplay(1)
     );
 
-    if (router && (automaticallySetCurrentScreen !== false || automaticallyLogScreenViews !== false)) {
-      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;
-          if (automaticallyLogScreenViews !== false) {
-            analytics.logEvent("screen_view", { app_name, app_version, screen_name, outlet, url });
-          }
-          if (automaticallySetCurrentScreen !== false) {
-            // TODO when is screen_name undefined?
-            analytics.setCurrentScreen(screen_name || url, { global: outlet == "primary" });
-          }
-        }),
-        runOutsideAngular(zone)
-      ).subscribe();
-    }
-
-    // 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()
-    }
-
-    return _lazySDKProxy(this, this.analytics, zone);
-
+    return _lazySDKProxy(this, analytics, zone);
   }
 
-}
+}

src/analytics/public_api.ts

@@ -1,2 +1,3 @@
 export * from './analytics';
 export * from './analytics.module';
+export * from './analytics.service';

src/core/angularfire2.ts

@@ -79,10 +79,10 @@ export const runInZone = (zone: NgZone) => <T>(obs$: Observable<T>): Observable<
     { [K in PromiseReturningFunctionPropertyNames<T>   ]: (...args: Parameters<T[K]>) => ReturnType<T[K]> };
 */
 
-export const _lazySDKProxy = (klass: any, promise: Promise<any>, zone: NgZone) => new Proxy(klass, {
+export const _lazySDKProxy = (klass: any, observable: Observable<any>, zone: NgZone) => new Proxy(klass, {
   get: (_, name) => zone.runOutsideAngular(() =>
     klass[name] || new Proxy(() => 
-      promise.then(mod => {
+      observable.toPromise().then(mod => {
         const ret = mod[name];
         // TODO move to proper type guards
         if (typeof ret == 'function') {

src/remote-config/remote-config.module.ts

@@ -1,7 +1,4 @@
 import { NgModule } from '@angular/core';
-import { AngularFireRemoteConfig } from './remote-config';
 
-@NgModule({
-  providers: [ AngularFireRemoteConfig ]
-})
+@NgModule()
 export class AngularFireRemoteConfigModule { }