Skip to content

Commit b00e14b

Browse files
jamesdanielsjamesdaniels
authored
feat(analytics): Bunch of analytics & screen tracking improvements (#2654)
* Better handle lazy routes * Better handle nested routes * Better handle nested & lazy routes * Handle multiple outlets correctly * Handle multiple outlets that share the same lazy components (this was tricky) * NO LONGER USING INTERNAL APIS OR REQUIRING ANNOTATIONS!!!! 🎉 😄 * `APP_NAME` and `APP_VERSION` should be working now... * `AngularFireAnalytics` now gets it's `measurementId` from Analytics rather than your config, there's an edge case where this can change out from underneath you, which the JS SDK handles * Got `DEBUG_MODE` working again
1 parent d71b59f commit b00e14b

20 files changed

+308
-153
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
<a name="6.1.0-rc.3"></a>
2+
# [6.1.0-rc.3](https://github.com/angular/angularfire/compare/6.1.0-rc.2...6.1.0-rc.3) (2020-11-14)
3+
4+
### Bug Fixes
5+
6+
* **analytics:** Bunch of analytics & screen tracking improvements ([#2654](https://github.com/angular/angularfire/pull/2654)) ([5bc159a](https://github.com/angular/angularfire/commit/5bc159a))
7+
18
<a name="6.1.0-rc.2"></a>
29
# [6.1.0-rc.2](https://github.com/angular/angularfire/compare/6.1.0-rc.1...6.1.0-rc.2) (2020-11-13)
310

‎sample/src/app/app-routing.module.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
import { NgModule } from '@angular/core';
22
import { Routes, RouterModule } from '@angular/router';
33
import { HomeComponent } from './home/home.component';
4-
4+
import { ProtectedComponent } from './protected/protected.component';
5+
import { AngularFireAuthGuard } from '@angular/fire/auth-guard';
6+
import { SecondaryComponent } from './secondary/secondary.component';
57

68
const routes: Routes = [
7-
{ path: '', component: HomeComponent, pathMatch: 'full' }
9+
{ path: '', component: HomeComponent, outlet: 'primary' },
10+
{ path: '', component: SecondaryComponent, outlet: 'secondary' },
11+
{ path: '', component: SecondaryComponent, outlet: 'tertiary' },
12+
{ path: 'protected', component: ProtectedComponent, canActivate: [AngularFireAuthGuard] },
13+
{ path: 'protected-lazy',
14+
loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule),
15+
canActivate: [AngularFireAuthGuard] },
16+
{ path: 'protected', component: ProtectedComponent, canActivate: [AngularFireAuthGuard], outlet: 'secondary' },
17+
{ path: 'protected', component: ProtectedComponent, canActivate: [AngularFireAuthGuard], outlet: 'tertiary' },
18+
{ path: 'protected-lazy',
19+
loadChildren: () => import('./protected-lazy/protected-lazy.module').then(m => m.ProtectedLazyModule),
20+
canActivate: [AngularFireAuthGuard],
21+
outlet: 'secondary' },
822
];
923

1024
@NgModule({

‎sample/src/app/app.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@ import { FirebaseApp } from '@angular/fire';
44
@Component({
55
selector: 'app-root',
66
template: `
7+
<a [routerLink]="[{ outlets: { primary: [] }}]">Home</a> | <a [routerLink]="[{ outlets: { primary: ['protected'] }}]">Protected</a> | <a [routerLink]="[{ outlets: { primary: ['protected-lazy'] }}]">Protected Lazy</a> | <a [routerLink]="[{ outlets: { primary: ['protected-lazy', 'asdf'] }}]">Protected Lazy Deep</a> | <a [routerLink]="[{ outlets: { primary: ['protected-lazy', '1', 'bob'] }}]">Protected Lazy Deep</a>
78
<router-outlet></router-outlet>
9+
<a [routerLink]="[{ outlets: { secondary: [] }}]">Home</a> | <a [routerLink]="[{ outlets: { secondary: ['protected'] }}]">Protected</a> | <a [routerLink]="[{ outlets: { secondary: ['protected-lazy'] }}]">Protected Lazy</a>
10+
<router-outlet name="secondary"></router-outlet>
11+
<a [routerLink]="[{ outlets: { tertiary: [] }}]">Home</a> | <a [routerLink]="[{ outlets: { tertiary: ['protected'] }}]">Protected</a>
12+
<router-outlet name="tertiary"></router-outlet>
813
`,
914
styles: [``]
1015
})

‎sample/src/app/app.module.ts‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,12 @@ import { AngularFireModule } from '@angular/fire';
1010

1111
import {
1212
AngularFireAnalyticsModule,
13+
APP_NAME,
14+
APP_VERSION,
1315
DEBUG_MODE as ANALYTICS_DEBUG_MODE,
1416
ScreenTrackingService,
15-
UserTrackingService
17+
UserTrackingService,
18+
COLLECTION_ENABLED
1619
} from '@angular/fire/analytics';
1720

1821
import { FirestoreComponent } from './firestore/firestore.component';
@@ -55,24 +58,20 @@ import { FunctionsComponent } from './functions/functions.component';
5558
AngularFireDatabaseModule,
5659
AngularFirestoreModule.enablePersistence({ synchronizeTabs: true }),
5760
AngularFireAuthModule,
61+
AngularFireAuthGuardModule,
5862
AngularFireRemoteConfigModule,
5963
AngularFireMessagingModule,
60-
// AngularFireAnalyticsModule, // TODO having trouble getting this to work in IE
64+
AngularFireAnalyticsModule,
6165
AngularFireFunctionsModule,
62-
// AngularFirePerformanceModule, // TODO having trouble getting this to work in IE
66+
AngularFirePerformanceModule,
6367
AngularFireAuthGuardModule
6468
],
6569
providers: [
66-
/*
67-
TODO Analytics and Performance monitoring aren't working in IE, sort this out
68-
UserTrackingService,
69-
ScreenTrackingService,
70-
PerformanceMonitoringService,
71-
{
72-
provide: ANALYTICS_DEBUG_MODE,
73-
useFactory: () => isDevMode()
74-
},
75-
*/
70+
UserTrackingService,
71+
ScreenTrackingService,
72+
PerformanceMonitoringService,
73+
{ provide: ANALYTICS_DEBUG_MODE, useValue: false },
74+
{ provide: COLLECTION_ENABLED, useValue: true },
7675
{ provide: USE_AUTH_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9099] : undefined },
7776
{ provide: USE_DATABASE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 9000] : undefined },
7877
{ provide: USE_FIRESTORE_EMULATOR, useValue: environment.useEmulators ? ['localhost', 8080] : undefined },
@@ -84,6 +83,8 @@ import { FunctionsComponent } from './functions/functions.component';
8483
{ provide: USE_DEVICE_LANGUAGE, useValue: true },
8584
{ provide: VAPID_KEY, useValue: environment.vapidKey },
8685
{ provide: SERVICE_WORKER, useFactory: () => navigator?.serviceWorker?.getRegistration() ?? undefined },
86+
{ provide: APP_VERSION, useValue: '0.0.0' },
87+
{ provide: APP_NAME, useValue: 'Angular' }
8788
],
8889
bootstrap: [AppComponent]
8990
})

‎sample/src/app/protected-lazy/protected-lazy-routing.module.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { Routes, RouterModule } from '@angular/router';
3+
4+
import { ProtectedLazyComponent } from './protected-lazy.component';
5+
6+
const routes: Routes = [
7+
{ path: '', component: ProtectedLazyComponent },
8+
{ path: 'asdf', component: ProtectedLazyComponent },
9+
{ path: ':id/bob', component: ProtectedLazyComponent }
10+
];
11+
12+
@NgModule({
13+
imports: [RouterModule.forChild(routes)],
14+
exports: [RouterModule]
15+
})
16+
export class ProtectedLazyRoutingModule { }

‎sample/src/app/protected-lazy/protected-lazy.component.css‎

Whitespace-only changes.

‎sample/src/app/protected-lazy/protected-lazy.component.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<p>protected-lazy works!</p>

‎sample/src/app/protected-lazy/protected-lazy.component.spec.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
3+
import { ProtectedLazyComponent } from './protected-lazy.component';
4+
5+
describe('ProtectedLazyComponent', () => {
6+
let component: ProtectedLazyComponent;
7+
let fixture: ComponentFixture<ProtectedLazyComponent>;
8+
9+
beforeEach(async () => {
10+
await TestBed.configureTestingModule({
11+
declarations: [ ProtectedLazyComponent ]
12+
})
13+
.compileComponents();
14+
});
15+
16+
beforeEach(() => {
17+
fixture = TestBed.createComponent(ProtectedLazyComponent);
18+
component = fixture.componentInstance;
19+
fixture.detectChanges();
20+
});
21+
22+
it('should create', () => {
23+
expect(component).toBeTruthy();
24+
});
25+
});

‎sample/src/app/protected-lazy/protected-lazy.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-protected-lazy',
5+
templateUrl: './protected-lazy.component.html',
6+
styleUrls: ['./protected-lazy.component.css']
7+
})
8+
export class ProtectedLazyComponent implements OnInit {
9+
10+
constructor() { }
11+
12+
ngOnInit(): void {
13+
}
14+
15+
}

‎sample/src/app/protected-lazy/protected-lazy.module.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { NgModule } from '@angular/core';
2+
import { CommonModule } from '@angular/common';
3+
4+
import { ProtectedLazyRoutingModule } from './protected-lazy-routing.module';
5+
import { ProtectedLazyComponent } from './protected-lazy.component';
6+
7+
8+
@NgModule({
9+
declarations: [ProtectedLazyComponent],
10+
imports: [
11+
CommonModule,
12+
ProtectedLazyRoutingModule
13+
]
14+
})
15+
export class ProtectedLazyModule { }

0 commit comments

Comments
 (0)