Fix proxy in Node, get component name for analytics in both JIT and AOT

jamesdaniels · jamesdaniels · commit d47dc3f8bfb0 · 2019-12-20T21:09:44.000-08:00
diff --git a/src/analytics/analytics.service.ts b/src/analytics/analytics.service.ts
@@ -1,9 +1,9 @@
-import { Injectable, Optional, NgZone, OnDestroy, ComponentFactoryResolver, Inject, PLATFORM_ID } from '@angular/core';
+import { Injectable, Optional, NgZone, OnDestroy, ComponentFactoryResolver, Inject, PLATFORM_ID, Injector, NgModuleFactory } from '@angular/core';
 import { Subscription, from, Observable, empty, of } from 'rxjs';
 import { filter, withLatestFrom, switchMap, map, tap, pairwise, startWith, groupBy, mergeMap } from 'rxjs/operators';
-import { Router, NavigationEnd, ActivationEnd } from '@angular/router';
+import { Router, NavigationEnd, ActivationEnd, ROUTES } from '@angular/router';
 import { runOutsideAngular } from '@angular/fire';
-import { AngularFireAnalytics } from './analytics';
+import { AngularFireAnalytics, DEBUG_MODE } from './analytics';
 import { User } from 'firebase/app';
 import { Title } from '@angular/platform-browser';
 import { isPlatformBrowser } from '@angular/common';
@@ -27,6 +27,8 @@ const DEFAULT_SCREEN_CLASS = '???';
 const NG_PRIMARY_OUTLET = 'primary';
 const SCREEN_INSTANCE_DELIMITER = '#';
 
+const ANNOTATIONS = '__annotations__';
+
 @Injectable()
 export class ScreenTrackingService implements OnDestroy {
 
@@ -38,7 +40,9 @@ export class ScreenTrackingService implements OnDestroy {
       @Optional() title:Title,
       componentFactoryResolver: ComponentFactoryResolver,
       @Inject(PLATFORM_ID) platformId:Object,
-      zone: NgZone
+      @Optional() @Inject(DEBUG_MODE) debugModeEnabled:boolean|null,
+      zone: NgZone,
+      injector: Injector
     ) {
         if (!router || !isPlatformBrowser(platformId)) { return this }
         zone.runOutsideAngular(() => {
@@ -70,23 +74,40 @@ export class ScreenTrackingService implements OnDestroy {
                         // it's lazy so it's not registered with componentFactoryResolver yet... seems a pain for a depreciated style
                         return of({...params, [SCREEN_CLASS_KEY]: loadChildren.split('#')[1]});
                     } else if (typeof component === 'string') {
-                        // TODO figure out when this would this be a string
                         return of({...params, [SCREEN_CLASS_KEY]: component });
                     } else if (component) {
                         const componentFactory = componentFactoryResolver.resolveComponentFactory(component);
                         return of({...params, [SCREEN_CLASS_KEY]: componentFactory.selector });
                     } else if (loadChildren) {
                         const loadedChildren = loadChildren();
-                        var loadedChildren$: Observable<any>;
-                        // TODO clean up this handling...
-                        // can componentFactorymoduleType take an ngmodulefactory or should i pass moduletype?
-                        try { loadedChildren$ = from(zone.runOutsideAngular(() => loadedChildren as any)) } catch(_) { loadedChildren$ = of(loadedChildren as any) }
-                        return loadedChildren$.pipe(map(child => {
-                            const componentFactory = componentFactoryResolver.resolveComponentFactory(child);
-                            return {...params, [SCREEN_CLASS_KEY]: componentFactory.selector };
-                        }));
+                        var loadedChildren$: Observable<any> = (loadedChildren instanceof Observable) ? loadedChildren : from(Promise.resolve(loadedChildren));
+                        return loadedChildren$.pipe(
+                          map(lazyModule => {
+                            if (lazyModule instanceof NgModuleFactory) {
+                              // AOT create an injector
+                              const moduleRef = lazyModule.create(injector);
+                              // INVESTIGATE is this the right way to get at the matching route?
+                              const routes = moduleRef.injector.get(ROUTES);
+                              const component = routes[0][0].component; // should i just be grabbing 0-0 here?
+                              try {
+                                const componentFactory = moduleRef.componentFactoryResolver.resolveComponentFactory(component!);
+                                return {...params, [SCREEN_CLASS_KEY]: componentFactory.selector};
+                              } catch(_) {
+                                return {...params, [SCREEN_CLASS_KEY]: DEFAULT_SCREEN_CLASS};
+                              }
+                            } else {
+                              // JIT look at the annotations
+                              // INVESTIGATE are there public APIs for this stuff?
+                              const declarations = [].concat.apply([], (lazyModule[ANNOTATIONS] || []).map((f:any) => f.declarations));
+                              const selectors = [].concat.apply([], declarations.map((c:any) => (c[ANNOTATIONS] || []).map((f:any) => f.selector)));
+                              // should I just be grabbing the selector like this or should i match against the route component?
+                              //   const routerModule = lazyModule.ngInjectorDef.imports.find(i => !!i.ngModule);
+                              //   const route = routerModule.providers[0].find(p => p.provide == ROUTES).useValue[0];
+                              return {...params, [SCREEN_CLASS_KEY]: selectors[0] || DEFAULT_SCREEN_CLASS};
+                            }
+                          })
+                        );
                     } else {
-                        // TODO figure out what forms of router events I might be missing
                         return of({...params, [SCREEN_CLASS_KEY]: DEFAULT_SCREEN_CLASS});
                     }
                 }),
@@ -116,6 +137,7 @@ export class ScreenTrackingService implements OnDestroy {
                     [FIREBASE_PREVIOUS_SCREEN_INSTANCE_ID_KEY]: prior[FIREBASE_SCREEN_INSTANCE_ID_KEY],
                     ...current!
                 } : current!),
+                tap(params => debugModeEnabled && console.info(SCREEN_VIEW_EVENT, params)),
                 tap(params => zone.runOutsideAngular(() => analytics.logEvent(SCREEN_VIEW_EVENT, params)))
             ).subscribe();
         });
diff --git a/src/analytics/analytics.spec.ts b/src/analytics/analytics.spec.ts
@@ -1,7 +1,7 @@
 import { ReflectiveInjector, Provider } from '@angular/core';
 import { TestBed, inject } from '@angular/core/testing';
 import { FirebaseApp, FirebaseOptionsToken, AngularFireModule, FirebaseNameOrConfigToken } from '@angular/fire';
-import { AngularFireAnalytics, AngularFireAnalyticsModule, AUTOMATICALLY_SET_CURRENT_SCREEN, AUTOMATICALLY_LOG_SCREEN_VIEWS, ANALYTICS_COLLECTION_ENABLED, AUTOMATICALLY_TRACK_USER_IDENTIFIER, APP_VERSION, APP_NAME } from '@angular/fire/analytics';
+import { AngularFireAnalytics, AngularFireAnalyticsModule, ANALYTICS_COLLECTION_ENABLED, APP_VERSION, APP_NAME } from '@angular/fire/analytics';
 import { COMMON_CONFIG } from './test-config';
 
 
@@ -32,7 +32,7 @@ describe('AngularFireAnalytics', () => {
   });
 
   it('should have the Firebase Functions instance', () => {
-    expect(analytics.analytics).toBeDefined();
+    expect(analytics.app).toBeDefined();
   });
 
 });
@@ -52,10 +52,7 @@ describe('AngularFireAnalytics with different app', () => {
       providers: [
         { provide: FirebaseNameOrConfigToken, useValue: FIREBASE_APP_NAME_TOO },
         { provide: FirebaseOptionsToken, useValue: COMMON_CONFIG },
-        { provide: AUTOMATICALLY_SET_CURRENT_SCREEN, useValue: true }
-        { provide: AUTOMATICALLY_LOG_SCREEN_VIEWS, useValue: true },
         { provide: ANALYTICS_COLLECTION_ENABLED, useValue: true },
-        { provide: AUTOMATICALLY_TRACK_USER_IDENTIFIER, useValue: true },
         { provide: APP_VERSION, useValue: '0.0' },
         { provide: APP_NAME, useValue: 'Test App!' }
       ]
@@ -78,7 +75,7 @@ describe('AngularFireAnalytics with different app', () => {
     });
 
     it('should have the Firebase Functions instance', () => {
-      expect(analytics.analytics).toBeDefined();
+      expect(analytics.app).toBeDefined();
     });
 
   });
diff --git a/src/analytics/analytics.ts b/src/analytics/analytics.ts
@@ -55,24 +55,25 @@ export class AngularFireAnalytics {
     zone: NgZone
   ) {
 
-    if (!isPlatformBrowser(platformId)) {
-      // TODO flush out non-browser support
+    if (isPlatformBrowser(platformId)) {
+
+      window[DATA_LAYER_NAME] = window[DATA_LAYER_NAME] || [];
+      this.gtag = window[GTAG_FUNCTION_NAME] || function() { window[DATA_LAYER_NAME].push(arguments) }
+      this.analyticsInitialized = zone.runOutsideAngular(() =>
+        new Promise(resolve => {
+          window[GTAG_FUNCTION_NAME] = (...args: any[]) => {
+            if (args[0] == 'js') { resolve() }
+            this.gtag(...args);
+          }
+        })
+      );
+
+    } else {
+
       this.analyticsInitialized = Promise.resolve();
       this.gtag = () => {}
-      // TODO fix the proxy for the server
-      return this;
-    }
 
-    window[DATA_LAYER_NAME] = window[DATA_LAYER_NAME] || [];
-    this.gtag = window[GTAG_FUNCTION_NAME] || function() { window[DATA_LAYER_NAME].push(arguments) }
-    this.analyticsInitialized = zone.runOutsideAngular(() =>
-      new Promise(resolve => {
-        window[GTAG_FUNCTION_NAME] = (...args: any[]) => {
-          if (args[0] == 'js') { resolve() }
-          this.gtag(...args);
-        }
-      })
-    );
+    }
 
     if (providedAppName)    { this.updateConfig({ [APP_NAME_KEY]:    providedAppName }) }
     if (providedAppVersion) { this.updateConfig({ [APP_VERSION_KEY]: providedAppVersion }) }
diff --git a/src/core/angularfire2.ts b/src/core/angularfire2.ts
@@ -84,25 +84,24 @@ export const ɵlazySDKProxy = (klass: any, observable: Observable<any>, zone: Ng
   get: (_, name) => zone.runOutsideAngular(() =>
     klass[name] || new Proxy(() => 
       observable.toPromise().then(mod => {
-        if (mod) {
-          const ret = mod[name];
-          // TODO move to proper type guards
-          if (typeof ret == 'function') {
-            return ret.bind(mod);
-          } else if (ret && ret.then) {
-            return ret.then((res:any) => zone.run(() => res));
-          } else {
-            return zone.run(() => ret);
-          }
+        const ret = mod && mod[name];
+        // TODO move to proper type guards
+        if (typeof ret == 'function') {
+          return ret.bind(mod);
+        } else if (ret && ret.then) {
+          return ret.then((res:any) => zone.run(() => res));
         } else {
-          // the module is not available, SSR maybe?
-          // TODO dig into this deeper, maybe return a never resolving promise?
-          return () => {};
+          return zone.run(() => ret);
         }
       }), {
-        get: (self, name) => self()[name],
-        // TODO handle callbacks
-        apply: (self, _, args) => self().then(it => it(...args))
-      })
+        get: (self, name) => {
+          const ret = self();
+          // TODO proxy so we can have apply?
+          return ret && ret[name] || (() => {});
+        },
+        // TODO handle callbacks as transparently as I can 
+        apply: (self, _, args) => self().then(it => it && it(...args))
+      }
+    )
   )
 });
diff --git a/src/remote-config/remote-config.spec.ts b/src/remote-config/remote-config.spec.ts
@@ -31,7 +31,7 @@ describe('AngularFireRemoteConfig', () => {
   });
 
   it('should have the Firebase Functions instance', () => {
-    expect(rc.remoteConfig).toBeDefined();
+    expect(rc.getValue).toBeDefined();
   });
 
 });
@@ -73,7 +73,7 @@ describe('AngularFireRemoteConfig with different app', () => {
     });
 
     it('should have the Firebase Functions instance', () => {
-      expect(rc.remoteConfig).toBeDefined();
+      expect(rc.getValue).toBeDefined();
     });
 
   });
