Skip to content

Commit 0be51e6

Browse files
jamesdanielsjamesdaniels
authored
AngularFire 6.0 🔥 (#2376)
* Updating peer dependencies * `ng add @angular/fire` now will overwrite firebase config, if present * `ng add @angular/fire` now adds `@firebase/firestore` to the server schematic `externalDependencies` if present * `ng deploy --preview` is now interactive and functions on non-SSR * `ng deploy` will respect the `bundleDependencies` and `externalDependencies` server schematic options * `ng deploy` now defaults to 1GB of ram on Cloud Functions * Fixed various issues with functions deploy * Simplified `AngularPerformanceMonitoring`
1 parent d91965e commit 0be51e6

27 files changed

+3034
-2267
lines changed

‎README.md

+1-7
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,9 @@
22
The official [Angular](https://angular.io/) library for [Firebase](https://firebase.google.com/).
33

44
```bash
5-
ng add @angular/fire@next
5+
ng add @angular/fire
66
```
77

8-
---
9-
10-
> **WARNING**: Master branch is the work in progress for version 6 of AngularFire. [You can find version 5 here](https://github.com/angular/angularfire/tree/v5), if you're looking for documentation or to contribute to stable. [Learn more about the road toward version 6 here](https://github.com/angular/angularfire/issues/2267).
11-
12-
---
13-
148
## What is AngularFire?
159

1610
- **Observable based** - Use the power of RxJS, Angular, and Firebase.

‎docs/performance/getting-started.md

+33-78
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ Understand your Angular application's real-world performance with [Firebase Perf
66

77
```ts
88
import { AngularFireModule } from '@angular/fire';
9-
import { AngularFirePerformanceModule } from '@angular/fire/performance';
9+
import { AngularFirePerformanceModule, PerformanceMonitoringService } from '@angular/fire/performance';
1010
import { environment } from '../environments/environment';
1111

1212
@NgModule({
@@ -16,6 +16,9 @@ import { environment } from '../environments/environment';
1616
AngularFirePerformanceModule,
1717
...
1818
],
19+
providers: [
20+
PerformanceMonitoringService
21+
],
1922
declarations: [ AppComponent ],
2023
bootstrap: [ AppComponent ]
2124
})
@@ -30,7 +33,7 @@ The page load trace breaks down into the following default metrics:
3033
* [domContentLoadedEventEnd traces](https://firebase.google.com/docs/perf-mon/automatic-web#domContentLoaded) — measure the time between when the user navigates to a page and when the initial HTML document is completely loaded and parsed
3134
* [loadEventEnd traces](https://firebase.google.com/docs/perf-mon/automatic-web#loadEventEnd) — measure the time between when the user navigates to the page and when the current document's load event completes
3235
* [first input delay traces](https://firebase.google.com/docs/perf-mon/automatic-web#input-delay) — measure the time between when the user interacts with a page and when the browser is able to respond to that input
33-
* **Angular specific traces** - measure the time needed for `ApplicationRef.isStable` to be true, an important metric to track if you're concerned about solving Zone.js issues for proper functionality of NGSW and Server Side Rendering
36+
* **Angular specific traces** - `PerformanceMonitoringService` will measure the time needed for `ApplicationRef.isStable` to be true, an important metric to track if you're concerned about solving Zone.js issues for proper functionality of NGSW and Server Side Rendering
3437

3538
### Measuring First Input Delay
3639

@@ -44,24 +47,43 @@ Then add `import 'first-input-delay';` to your `src/polyfills.ts`.
4447

4548
## Manual traces
4649

47-
You can inject `AngularFirePerformance` to perform manual traces on Observables.
50+
You can inject `AngularFirePerformance` to perform manual traces.
51+
52+
```ts
53+
constructor(private performance: AngularFirePerformance) {}
54+
55+
ngOnInit() {
56+
const trace = this.performance.trace('some-trace');
57+
trace.start();
58+
...
59+
trace.stop();
60+
}
61+
```
62+
63+
## RXJS operators
64+
65+
AngularFire provides a number of RXJS operaters which wrap the User Timing API. These are picked up by performance monitoring tools such as Chrome Inspector and Firebase Performance Monitoring.
4866

4967
```ts
50-
constructor(private afp: AngularFirePerformance, private afs: AngularFirestore) {}
68+
import { trace } from '@angular/fire/performance';
69+
70+
...
71+
72+
constructor(private performance: AngularFirePerformance, private afs: AngularFirestore) {}
5173

5274
ngOnInit() {
5375
this.articles = afs.collection('articles')
5476
.collection('articles', ref => ref.orderBy('publishedAt', 'desc'))
5577
.snapshotChanges()
5678
.pipe(
5779
// measure the amount of time between the Observable being subscribed to and first emission (or completion)
58-
this.afp.trace('getArticles'),
80+
trace('getArticles'),
5981
map(articles => ...)
6082
);
6183
}
6284
```
6385

64-
### `trace(name: string, options?: TraceOptions)`
86+
### `trace(name: string)`
6587

6688
The most basic operator, `trace` will measure the amount of time it takes for your observable to either complete or emit its first value. Beyond the basic trace there are several other operators:
6789

@@ -70,7 +92,7 @@ The most basic operator, `trace` will measure the amount of time it takes for yo
7092
traceUntil(
7193
name: string,
7294
test: (T) => Boolean,
73-
options?: TraceOptions & { orComplete?: true }
95+
options?: { orComplete?: true }
7496
)
7597
</pre>
7698
</h3>
@@ -84,7 +106,7 @@ If the `orComplete` option is passed it will complete the trace when the observa
84106
traceWhile(
85107
name: string,
86108
test: (T) => Boolean,
87-
options?: TraceOptions & { orComplete?: true }
109+
options?: { orComplete?: true }
88110
)
89111
</pre>
90112
</h3>
@@ -93,83 +115,16 @@ Starting with an emission that passes the provided test, trace until an emission
93115

94116
If the `orComplete` option is passed it will complete any existing trace when the observable completes.
95117

96-
### `traceUntilLast(name: string, options?: TraceOptions)`
118+
### `traceUntilLast(name: string)`
97119

98120
Trace the observable until completion.
99121

100-
### `traceUntilFirst(name: string, options?: TraceOptions)`
122+
### `traceUntilFirst(name: string)`
101123

102124
Traces the observable until the first emission.
103125

104126
## Advanced usage
105127

106128
### Configuration via Dependency Injection
107129

108-
By default, `AngularFirePerformanceModule` traces your Angular application's time to `ApplicationRef.isStable`. `isStable` is an important metric to track if you're concerned about proper functionality of NGSW and Server Side Rendering. If you want to opt-out of the tracing of this metric use the `AUTOMATICALLY_TRACE_CORE_NG_METRICS` injection token:
109-
110-
```ts
111-
import { NgModule } from '@angular/core';
112-
import { AngularFirePerformanceModule, AUTOMATICALLY_TRACE_CORE_NG_METRICS } from '@angular/fire/functions';
113-
114-
@NgModule({
115-
imports: [
116-
...
117-
AngularFirePerformanceModule,
118-
...
119-
],
120-
...
121-
providers: [
122-
{ provide: AUTOMATICALLY_TRACE_CORE_NG_METRICS, useValue: false }
123-
]
124-
})
125-
export class AppModule {}
126-
```
127-
128-
Similarly, setting `INSTRUMENTATION_ENABLED` or `DATA_COLLECTION_ENABLED` to false disable all automatic and custom traces respectively.
129-
130-
### Get at an observable form of trace
131-
132-
`trace$(name:string)` provides an observable version of `firebase/perf`'s `.trace` method; the basis for `AngularFirePerfomance`'s pipes.
133-
134-
`.subscribe()` is equivalent to calling `.start()`
135-
`.unsubscribe()` is equivalent to calling `.stop()`
136-
137-
### Using `TraceOptions` to collect additional metrics
138-
139-
`TraceOptions` can be provided to the aformentioned operators to collect custom metrics and attributes on your traces:
140-
141-
```ts
142-
type TraceOptions = {
143-
metrics?: { [key:string]: number },
144-
attributes?: { [key:string]: string },
145-
attribute$?: { [key:string]: Observable<string> },
146-
incrementMetric$: { [key:string]: Observable<number|void|null|undefined> },
147-
metric$?: { [key:string]: Observable<number> }
148-
};
149-
```
150-
151-
#### Usage:
152-
153-
```ts
154-
const articleLength$ = this.articles.pipe(
155-
map(actions => actions.length)
156-
);
157-
158-
const articleSize$ = this.articles.pipe(
159-
map(actions => actions.reduce((sum, a) => sum += JSON.stringify(a.payload.doc.data()).length))
160-
)
161-
162-
this.articles = afs.collection('articles')
163-
.collection('articles', ref => ref.orderBy('publishedAt', 'desc'))
164-
.snapshotChanges()
165-
.pipe(
166-
this.afp.trace('getArticles', {
167-
attributes: { gitSha: '1d277f823ad98dd739fb86e9a6c440aa8237ff3a' },
168-
metrics: { something: 42 },
169-
metrics$: { count: articleLength$, size: articleSize$ },
170-
attributes$: { user: this.afAuth.user },
171-
incrementMetric$: { buttonClicks: fromEvent(button, 'click') }
172-
}),
173-
share()
174-
);
175-
```
130+
Set `INSTRUMENTATION_ENABLED` or `DATA_COLLECTION_ENABLED` to false disable all automatic and custom traces respectively.

‎docs/version-6-upgrade.md

+3-6
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,15 @@
22

33
Intended to be run with Angular 9; version 6 of AngularFire drops support for Angular version 8 and below, older versions of typescript, Firebase, drops `firebase-node`, `database-deprecated`, and more.
44

5-
> **WARNING**: Version 6 is still a Release Candidate and subject to change, [please monitor the changelog for up-to-date information on what we've been up to](../CHANGELOG.md).
6-
7-
We're aiming to release 6.0 with an upgrade schematic to automate most of the required changes, however as of RC.1 that script is not yet available.
8-
95
## Breaking changes:
106

117
* Support for Angular versions less than 9 has been dropped
12-
* Support for Firebase JS SDK versions less than 7.8 has been dropped
13-
* Support for `firebase-tools` less than 7.12 has been dropped
8+
* Support for Firebase JS SDK versions less than 7.13.1 has been dropped
9+
* Support for `firebase-tools` less than 8.0 has been dropped
1410
* The `angularfire2` NPM library will no longer be updated
1511
* Dropped `@angular/fire/firebase-node` and `@angular/fire/database-depreciated`
1612
* We make use of Proxy in more modules, you'll need to polyfill if you want to support IE 11
1713
* We've standardized our DI Token naming conventions across all modules
1814
* `AngularFireAuth` has dropped the `auth` property and instead Promise Proxies the underlying Firebase `auth.Auth` instance; allowing your development experience to more closely mirror the JS SDK. Similar changes have been made to `AngularFireFunctions`, `AngularFireMessaging`, and `AngularFirePerformance`.
1915
* `AngularFireAuthGuard` and `canActivate` have dropped support for raw pipes, this was never working correctly in AOT
16+
* `AngularFirePerformance` has been simplified, the RXJS pipes are now exported as pure-functions outside the class. Automatic tracking of `isStable` timing has now been moved into `PerformanceMonitoringService` and we've dropped the `AUTOMATICALLY_TRACE_CORE_NG_METRICS` DI token.

‎package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@
4343
"@angular/platform-browser": "^9.0.0",
4444
"@angular/platform-browser-dynamic": "^9.0.0",
4545
"@angular/router": "^9.0.0",
46-
"firebase": "^7.8.0",
47-
"firebase-admin": "^8.9.2",
48-
"firebase-functions": "^3.3.0",
49-
"firebase-tools": "^7.12.1",
46+
"firebase": "^7.13.1",
47+
"firebase-admin": "^8.10.0",
48+
"firebase-functions": "^3.6.0",
49+
"firebase-tools": "^8.0.0",
5050
"fs-extra": "^8.0.1",
5151
"fuzzy": "^0.1.3",
5252
"inquirer": "^6.2.2",

‎sample/angular.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -124,10 +124,11 @@
124124
"outputPath": "dist/sample/server",
125125
"main": "server.ts",
126126
"tsConfig": "tsconfig.server.json",
127+
"bundleDependencies": false,
127128
"externalDependencies": [
129+
"@firebase/firestore",
128130
"@firebase/firestore"
129-
],
130-
"verbose": true
131+
]
131132
},
132133
"configurations": {
133134
"production": {
@@ -171,7 +172,9 @@
171172
},
172173
"deploy": {
173174
"builder": "@angular/fire:deploy",
174-
"options": {}
175+
"options": {
176+
"ssr": true
177+
}
175178
}
176179
}
177180
}

‎sample/firebase.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"hosting": [
33
{
44
"target": "sample",
5-
"public": "dist/sample/browser",
5+
"public": "dist/sample/dist/sample/browser",
66
"ignore": [
77
"firebase.json",
88
"**/.*",
@@ -11,9 +11,12 @@
1111
"rewrites": [
1212
{
1313
"source": "**",
14-
"destination": "/index.html"
14+
"function": "ssr"
1515
}
1616
]
1717
}
18-
]
18+
],
19+
"functions": {
20+
"source": "dist/sample"
21+
}
1922
}

‎sample/package.json

+22-19
Original file line numberDiff line numberDiff line change
@@ -15,36 +15,39 @@
1515
},
1616
"private": true,
1717
"dependencies": {
18-
"@angular/animations": "~9.0.5",
19-
"@angular/common": "~9.0.5",
20-
"@angular/compiler": "~9.0.5",
21-
"@angular/core": "~9.0.5",
18+
"@angular/animations": "~9.1.0",
19+
"@angular/common": "~9.1.0",
20+
"@angular/compiler": "~9.1.0",
21+
"@angular/core": "~9.1.0",
2222
"@angular/fire": "file:../dist/packages-dist",
23-
"@angular/forms": "~9.0.5",
24-
"@angular/platform-browser": "~9.0.5",
25-
"@angular/platform-browser-dynamic": "~9.0.5",
26-
"@angular/platform-server": "^9.0.5",
27-
"@angular/router": "~9.0.5",
28-
"@angular/service-worker": "^9.0.5",
29-
"@nguniversal/express-engine": "^9.0.1",
30-
"firebase": "^7.8.0",
23+
"@angular/forms": "~9.1.0",
24+
"@angular/platform-browser": "~9.1.0",
25+
"@angular/platform-browser-dynamic": "~9.1.0",
26+
"@angular/platform-server": "~9.1.0",
27+
"@angular/router": "~9.1.0",
28+
"@angular/service-worker": "~9.1.0",
29+
"@nguniversal/express-engine": "~9.1.0",
30+
"firebase": "^7.13.1",
3131
"rxjs": "~6.5.4",
3232
"tslib": "^1.10.0",
3333
"zone.js": "~0.10.2"
3434
},
3535
"devDependencies": {
36-
"@angular-devkit/architect": "~0.900.0",
37-
"@angular-devkit/build-angular": "~0.900.5",
38-
"@angular/cli": "~9.0.5",
39-
"@angular/compiler-cli": "~9.0.5",
40-
"@angular/language-service": "~9.0.5",
41-
"@nguniversal/builders": "^9.0.1",
36+
"@angular-devkit/architect": "~0.901.0",
37+
"@angular-devkit/build-angular": "~0.901.0",
38+
"@angular/cli": "~9.1.0",
39+
"@angular/compiler-cli": "~9.1.0",
40+
"@angular/language-service": "~9.1.0",
41+
"@nguniversal/builders": "^9.1.0",
4242
"@types/jasmine": "~3.5.0",
4343
"@types/jasminewd2": "~2.0.3",
4444
"@types/node": "^12.11.1",
4545
"codelyzer": "^5.1.2",
4646
"express-serve-static-core": "^0.1.1",
47-
"firebase-tools": "^7.12.1",
47+
"firebase-admin": "^8.10.0",
48+
"firebase-functions": "^3.6.0",
49+
"firebase-functions-test": "^0.2.0",
50+
"firebase-tools": "^8.0.0",
4851
"fuzzy": "^0.1.3",
4952
"inquirer": "^6.2.2",
5053
"inquirer-autocomplete-prompt": "^1.0.1",

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { AngularFirestoreModule, SETTINGS as FIRESTORE_SETTINGS } from '@angular
1919
import { AngularFireMessagingModule } from '@angular/fire/messaging';
2020
import { AngularFireFunctionsModule, ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/functions';
2121
import { AngularFireRemoteConfigModule, SETTINGS as REMOTE_CONFIG_SETTINGS } from '@angular/fire/remote-config';
22-
import { AngularFirePerformanceModule } from '@angular/fire/performance';
22+
import { AngularFirePerformanceModule, PerformanceMonitoringService } from '@angular/fire/performance';
2323
import { AngularFireAuthGuardModule } from '@angular/fire/auth-guard';
2424
import { DatabaseComponent } from './database/database.component';
2525
import { StorageComponent } from './storage/storage.component';
@@ -49,6 +49,7 @@ const shouldUseEmulator = () => false;
4949
providers: [
5050
UserTrackingService,
5151
ScreenTrackingService,
52+
PerformanceMonitoringService,
5253
{ provide: ANALYTICS_DEBUG_MODE, useFactory: () => isDevMode() },
5354
{ provide: DATABASE_URL, useFactory: () => shouldUseEmulator() ? `http://localhost:9000?ns=${environment.firebase.projectId}` : undefined },
5455
{ provide: FIRESTORE_SETTINGS, useFactory: () => shouldUseEmulator() ? { host: 'localhost:8080', ssl: false } : {} },

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { AngularFireDatabase } from '@angular/fire/database';
33
import { Observable } from 'rxjs';
44
import { TransferState, makeStateKey } from '@angular/platform-browser';
55
import { startWith, tap } from 'rxjs/operators';
6+
import { trace } from '@angular/fire/performance';
67

78
@Component({
89
selector: 'app-database',
@@ -22,7 +23,10 @@ export class DatabaseComponent implements OnInit {
2223
const doc = database.object('test');
2324
const key = makeStateKey(doc.query.toString());
2425
const existing = state.get(key, undefined);
25-
this.testObjectValue$ = doc.valueChanges().pipe(existing ? startWith(existing) : tap(it => state.set(key, it)));
26+
this.testObjectValue$ = doc.valueChanges().pipe(
27+
trace('database'),
28+
existing ? startWith(existing) : tap(it => state.set(key, it))
29+
);
2630
}
2731

2832
ngOnInit(): void {

0 commit comments

Comments
 (0)