@angular/fire 7.5.0 → 7.6.0-canary.34e89a4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +95 -74
- package/analytics/is-analytics-supported-factory.d.ts +4 -0
- package/bundles/angular-fire-analytics.umd.js +41 -31
- package/bundles/angular-fire-analytics.umd.js.map +1 -1
- package/bundles/angular-fire-app-check.umd.js +14 -18
- package/bundles/angular-fire-app-check.umd.js.map +1 -1
- package/bundles/angular-fire-app.umd.js +14 -18
- package/bundles/angular-fire-app.umd.js.map +1 -1
- package/bundles/angular-fire-auth-guard.umd.js +5 -7
- package/bundles/angular-fire-auth-guard.umd.js.map +1 -1
- package/bundles/angular-fire-auth.umd.js +64 -68
- package/bundles/angular-fire-auth.umd.js.map +1 -1
- package/bundles/angular-fire-compat-analytics.umd.js +11 -13
- package/bundles/angular-fire-compat-analytics.umd.js.map +1 -1
- package/bundles/angular-fire-compat-auth-guard.umd.js +6 -8
- package/bundles/angular-fire-compat-auth-guard.umd.js.map +1 -1
- package/bundles/angular-fire-compat-auth.umd.js +11 -13
- package/bundles/angular-fire-compat-auth.umd.js.map +1 -1
- package/bundles/angular-fire-compat-database.umd.js +9 -11
- package/bundles/angular-fire-compat-database.umd.js.map +1 -1
- package/bundles/angular-fire-compat-firestore.umd.js +9 -11
- package/bundles/angular-fire-compat-firestore.umd.js.map +1 -1
- package/bundles/angular-fire-compat-functions.umd.js +9 -11
- package/bundles/angular-fire-compat-functions.umd.js.map +1 -1
- package/bundles/angular-fire-compat-messaging.umd.js +8 -10
- package/bundles/angular-fire-compat-messaging.umd.js.map +1 -1
- package/bundles/angular-fire-compat-performance.umd.js +8 -10
- package/bundles/angular-fire-compat-performance.umd.js.map +1 -1
- package/bundles/angular-fire-compat-remote-config.umd.js +9 -11
- package/bundles/angular-fire-compat-remote-config.umd.js.map +1 -1
- package/bundles/angular-fire-compat-storage.umd.js +8 -10
- package/bundles/angular-fire-compat-storage.umd.js.map +1 -1
- package/bundles/angular-fire-compat.umd.js +13 -15
- package/bundles/angular-fire-compat.umd.js.map +1 -1
- package/bundles/angular-fire-database.umd.js +59 -67
- package/bundles/angular-fire-database.umd.js.map +1 -1
- package/bundles/angular-fire-firestore-lite.umd.js +50 -54
- package/bundles/angular-fire-firestore-lite.umd.js.map +1 -1
- package/bundles/angular-fire-firestore.umd.js +67 -71
- package/bundles/angular-fire-firestore.umd.js.map +1 -1
- package/bundles/angular-fire-functions.umd.js +15 -19
- package/bundles/angular-fire-functions.umd.js.map +1 -1
- package/bundles/angular-fire-messaging.umd.js +33 -23
- package/bundles/angular-fire-messaging.umd.js.map +1 -1
- package/bundles/angular-fire-performance.umd.js +17 -21
- package/bundles/angular-fire-performance.umd.js.map +1 -1
- package/bundles/angular-fire-remote-config.umd.js +47 -37
- package/bundles/angular-fire-remote-config.umd.js.map +1 -1
- package/bundles/angular-fire-storage.umd.js +27 -31
- package/bundles/angular-fire-storage.umd.js.map +1 -1
- package/bundles/angular-fire.umd.js +16 -59
- package/bundles/angular-fire.umd.js.map +1 -1
- package/compat/firestore/interfaces.d.ts +4 -4
- package/core.d.ts +1 -12
- package/docs/analytics.md +67 -0
- package/docs/app-check.md +53 -0
- package/docs/auth.md +165 -0
- package/docs/{analytics → compat/analytics}/getting-started.md +2 -0
- package/docs/{auth → compat/auth}/getting-started.md +2 -0
- package/docs/{auth → compat/auth}/router-guards.md +2 -0
- package/docs/{emulators → compat/emulators}/emulators.md +2 -0
- package/docs/{firestore → compat/firestore}/collections.md +2 -0
- package/docs/{firestore → compat/firestore}/documents.md +2 -0
- package/docs/{firestore → compat/firestore}/offline-data.md +2 -0
- package/docs/{firestore → compat/firestore}/querying-collections.md +2 -0
- package/docs/{functions → compat/functions}/functions.md +2 -0
- package/docs/{messaging → compat/messaging}/messaging.md +2 -0
- package/docs/{performance → compat/performance}/getting-started.md +2 -0
- package/docs/{remote-config → compat/remote-config}/getting-started.md +2 -0
- package/docs/{rtdb → compat/rtdb}/lists.md +2 -0
- package/docs/{rtdb → compat/rtdb}/objects.md +2 -0
- package/docs/{rtdb → compat/rtdb}/querying-lists.md +2 -0
- package/docs/{storage → compat/storage}/storage.md +2 -0
- package/docs/compat.md +70 -0
- package/docs/database.md +175 -0
- package/docs/deploy/getting-started.md +2 -2
- package/docs/firestore.md +148 -0
- package/docs/functions.md +52 -0
- package/docs/images/analytics-illo_1x.png +0 -0
- package/docs/images/auth-illo_1x.png +0 -0
- package/docs/images/cloud-messaging-illo_1x.png +0 -0
- package/docs/images/database-illo_1x.png +0 -0
- package/docs/images/firestore-illo_1x.png +0 -0
- package/docs/images/functions-illo_1x.png +0 -0
- package/docs/images/hosting-illo_1x.png +0 -0
- package/docs/images/performance-illo_1x.png +0 -0
- package/docs/images/reCAPTCHA-logo@1x.png +0 -0
- package/docs/images/remote-config-illo_1x.png +0 -0
- package/docs/images/storage-illo_1x.png +0 -0
- package/docs/install-and-setup.md +39 -86
- package/docs/install-firebase-tools.md +78 -0
- package/docs/messaging.md +25 -0
- package/docs/performance.md +57 -0
- package/docs/remote-config.md +53 -0
- package/docs/storage.md +90 -0
- package/docs/universal/cloud-functions.md +27 -6
- package/docs/universal/getting-started.md +9 -134
- package/esm2015/analytics/analytics.module.js +7 -6
- package/esm2015/analytics/is-analytics-supported-factory.js +16 -0
- package/esm2015/analytics/overrides.js +3 -3
- package/esm2015/compat/firestore/interfaces.js +1 -1
- package/esm2015/core.js +3 -45
- package/esm2015/messaging/is-messaging-supported-factory.js +16 -0
- package/esm2015/messaging/messaging.module.js +7 -6
- package/esm2015/messaging/overrides.js +3 -3
- package/esm2015/remote-config/is-remote-config-supported-factory.js +16 -0
- package/esm2015/remote-config/overrides.js +3 -3
- package/esm2015/remote-config/remote-config.module.js +7 -6
- package/fesm2015/angular-fire-analytics.js +21 -7
- package/fesm2015/angular-fire-analytics.js.map +1 -1
- package/fesm2015/angular-fire-app-check.js.map +1 -1
- package/fesm2015/angular-fire-app.js.map +1 -1
- package/fesm2015/angular-fire-auth-guard.js.map +1 -1
- package/fesm2015/angular-fire-auth.js.map +1 -1
- package/fesm2015/angular-fire-compat-analytics.js.map +1 -1
- package/fesm2015/angular-fire-compat-auth-guard.js.map +1 -1
- package/fesm2015/angular-fire-compat-auth.js.map +1 -1
- package/fesm2015/angular-fire-compat-database.js +1 -1
- package/fesm2015/angular-fire-compat-database.js.map +1 -1
- package/fesm2015/angular-fire-compat-firestore.js +1 -1
- package/fesm2015/angular-fire-compat-firestore.js.map +1 -1
- package/fesm2015/angular-fire-compat-functions.js.map +1 -1
- package/fesm2015/angular-fire-compat-messaging.js.map +1 -1
- package/fesm2015/angular-fire-compat-performance.js.map +1 -1
- package/fesm2015/angular-fire-compat-remote-config.js.map +1 -1
- package/fesm2015/angular-fire-compat-storage.js.map +1 -1
- package/fesm2015/angular-fire-compat.js.map +1 -1
- package/fesm2015/angular-fire-database.js.map +1 -1
- package/fesm2015/angular-fire-firestore-lite.js.map +1 -1
- package/fesm2015/angular-fire-firestore.js.map +1 -1
- package/fesm2015/angular-fire-functions.js.map +1 -1
- package/fesm2015/angular-fire-messaging.js +21 -7
- package/fesm2015/angular-fire-messaging.js.map +1 -1
- package/fesm2015/angular-fire-performance.js.map +1 -1
- package/fesm2015/angular-fire-remote-config.js +22 -8
- package/fesm2015/angular-fire-remote-config.js.map +1 -1
- package/fesm2015/angular-fire-storage.js.map +1 -1
- package/fesm2015/angular-fire.js +3 -45
- package/fesm2015/angular-fire.js.map +1 -1
- package/messaging/is-messaging-supported-factory.d.ts +4 -0
- package/package.json +9 -10
- package/remote-config/is-remote-config-supported-factory.d.ts +4 -0
- package/schematics/deploy/actions.js +8 -3
- package/schematics/deploy/builder.js +2 -2
- package/schematics/firebaseTools.js +4 -2
- package/schematics/setup/index.js +58 -29
- package/schematics/setup/prompts.js +18 -46
- package/schematics/utils.js +32 -28
- package/docs/ionic/authentication.md +0 -104
- package/docs/ionic/cli.md +0 -218
- package/docs/ionic/v2.md +0 -531
- package/docs/ionic/v3.md +0 -705
- package/schematics/setup/ssr.js +0 -100
- package/schematics/setup/static.js +0 -78
package/docs/auth.md
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<img align="right" width="30%" src="images/auth-illo_1x.png">
|
|
2
|
+
|
|
3
|
+
<small>
|
|
4
|
+
<a href="https://github.com/angular/angularfire">AngularFire</a> ❱ <a href="../README.md#developer-guide">Developer Guide</a> ❱ Authentication
|
|
5
|
+
</small>
|
|
6
|
+
|
|
7
|
+
# Authentication
|
|
8
|
+
|
|
9
|
+
Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices.
|
|
10
|
+
Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.
|
|
11
|
+
|
|
12
|
+
Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.
|
|
13
|
+
|
|
14
|
+
[Learn more about Firebase Authentication](https://firebase.google.com/docs/auth)
|
|
15
|
+
|
|
16
|
+
## Dependency Injection
|
|
17
|
+
|
|
18
|
+
As a prerequisite, ensure that `AngularFire` has been added to your project via
|
|
19
|
+
```bash
|
|
20
|
+
ng add @angular/fire
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Provide an auth instance in the application's `NgModule` (`app.module.ts`):
|
|
24
|
+
|
|
25
|
+
```ts
|
|
26
|
+
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
|
|
27
|
+
import { getAuth, provideAuth } from '@angular/fire/auth';
|
|
28
|
+
|
|
29
|
+
@NgModule({
|
|
30
|
+
imports: [
|
|
31
|
+
provideFirebaseApp(() => initializeApp(environment.firebase)),
|
|
32
|
+
provideAuth(() => getAuth()),
|
|
33
|
+
]
|
|
34
|
+
})
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Next inject it into your component:
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
import { Component, inject} from '@angular/core';
|
|
41
|
+
import { Auth } from '@angular/fire/auth';
|
|
42
|
+
|
|
43
|
+
@Component({ ... })
|
|
44
|
+
export class LoginComponent {
|
|
45
|
+
private auth: Auth = inject(Auth);
|
|
46
|
+
...
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Firebase API
|
|
51
|
+
|
|
52
|
+
AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
|
|
53
|
+
|
|
54
|
+
Update the imports from `import { ... } from 'firebase/auth'` to `import { ... } from '@angular/fire/auth'` and follow the offical documentation.
|
|
55
|
+
|
|
56
|
+
[Getting Started](https://firebase.google.com/docs/auth/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/auth)
|
|
57
|
+
|
|
58
|
+
## Convenience observables
|
|
59
|
+
|
|
60
|
+
AngularFire provides observables to allow convenient use of the Firebase Authentication with RXJS.
|
|
61
|
+
|
|
62
|
+
### user
|
|
63
|
+
|
|
64
|
+
The `user` observable streams events triggered by sign-in, sign-out, and token refresh events.
|
|
65
|
+
|
|
66
|
+
Example code:
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
import { Auth, User, user } from '@angular/fire/auth';
|
|
70
|
+
...
|
|
71
|
+
|
|
72
|
+
export class UserComponent implements OnDestroy {
|
|
73
|
+
private auth: Auth = inject(Auth);
|
|
74
|
+
user$ = user(auth);
|
|
75
|
+
userSubscription: Subscription;
|
|
76
|
+
...
|
|
77
|
+
|
|
78
|
+
constructor() {
|
|
79
|
+
this.userSubscription = this.user$.subscribe((aUser: User | null) => {
|
|
80
|
+
//handle user state changes here. Note, that user will be null if there is no currently logged in user.
|
|
81
|
+
console.log(aUser);
|
|
82
|
+
})
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
ngOnDestroy() {
|
|
86
|
+
// when manually subscribing to an observable remember to unsubscribe in ngOnDestroy
|
|
87
|
+
this.userSubscription.unsubscribe();
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### authState
|
|
94
|
+
|
|
95
|
+
The `authState` observable streams events triggered by sign-in and sign-out events.
|
|
96
|
+
|
|
97
|
+
Example code:
|
|
98
|
+
```ts
|
|
99
|
+
import { Auth, authState } from '@angular/fire/auth';
|
|
100
|
+
...
|
|
101
|
+
|
|
102
|
+
export class UserComponent implements OnDestroy {
|
|
103
|
+
private auth: Auth = inject(Auth);
|
|
104
|
+
authState$ = authState(auth);
|
|
105
|
+
authStateSubscription: Subscription;
|
|
106
|
+
...
|
|
107
|
+
|
|
108
|
+
constructor() {
|
|
109
|
+
this.authStateSubscription = this.authState$.subscribe((aUser: User | null) => {
|
|
110
|
+
//handle auth state changes here. Note, that user will be null if there is no currently logged in user.
|
|
111
|
+
console.log(aUser);
|
|
112
|
+
})
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
ngOnDestroy() {
|
|
116
|
+
// when manually subscribing to an observable remember to unsubscribe in ngOnDestroy
|
|
117
|
+
this.authStateSubscription.unsubscribe();
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### idToken
|
|
123
|
+
|
|
124
|
+
The `idToken` observable streams events triggered by sign-in, sign-out and token refresh events.
|
|
125
|
+
|
|
126
|
+
Example code:
|
|
127
|
+
```ts
|
|
128
|
+
import { Auth, idToken } from '@angular/fire/auth';
|
|
129
|
+
...
|
|
130
|
+
|
|
131
|
+
export class UserComponent implements OnDestroy {
|
|
132
|
+
private auth: Auth = inject(Auth);
|
|
133
|
+
idToken$ = idToken(auth);
|
|
134
|
+
idTokenSubscription: Subscription;
|
|
135
|
+
...
|
|
136
|
+
|
|
137
|
+
constructor() {
|
|
138
|
+
this.idTokenSubscription = this.idToken$.subscribe((token: string | null) => {
|
|
139
|
+
//handle idToken changes here. Note, that user will be null if there is no currently logged in user.
|
|
140
|
+
console.log(string);
|
|
141
|
+
})
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
ngOnDestroy() {
|
|
145
|
+
// when manually subscribing to an observable remember to unsubscribe in ngOnDestroy
|
|
146
|
+
this.idTokenSubscription.unsubscribe();
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Connecting the emulator suite
|
|
152
|
+
|
|
153
|
+
```ts
|
|
154
|
+
import { connectAuthEmulator, getAuth, provideAuth } from '@angular/fire/auth';
|
|
155
|
+
|
|
156
|
+
@NgModule({
|
|
157
|
+
imports: [
|
|
158
|
+
provideAuth(() => {
|
|
159
|
+
const auth = getAuth();
|
|
160
|
+
connectAuthEmulator(auth, 'http://localhost:9099', { disableWarnings: true });
|
|
161
|
+
return auth;
|
|
162
|
+
}),
|
|
163
|
+
]
|
|
164
|
+
})
|
|
165
|
+
```
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
`AngularFireAnalytics` dynamically imports the `firebase/analytics` library and provides a promisified version of the [Firebase Analytics SDK (`firebase.analytics.Analytics`)](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html).
|
|
4
4
|
|
|
5
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
6
|
+
|
|
5
7
|
### API:
|
|
6
8
|
|
|
7
9
|
```ts
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
`firebase.auth.Auth` instance, allowing you to log users in, out, etc. [See
|
|
7
7
|
the Firebase docs for more information on what methods are available.](https://firebase.google.com/docs/reference/js/firebase.auth.Auth)
|
|
8
8
|
|
|
9
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
10
|
+
|
|
9
11
|
**Example app:**
|
|
10
12
|
|
|
11
13
|
```ts
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
`AngularFireAuthGuard` provides a prebuilt [`canActivate` Router Guard](https://angular.io/api/router/CanActivate) using `AngularFireAuth`. By default unauthenticated users are not permitted to navigate to protected routes:
|
|
4
4
|
|
|
5
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
6
|
+
|
|
5
7
|
```ts
|
|
6
8
|
import { AngularFireAuthGuard } from '@angular/fire/compat/auth-guard';
|
|
7
9
|
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
In this guide, we'll look at how to use `@angular/fire` to connect an Angular application with Firebase Emulator Suite to start prototyping your apps.
|
|
4
4
|
|
|
5
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
6
|
+
|
|
5
7
|
There are four supported emulators, all of them available at the Firebase suite workflow:
|
|
6
8
|
|
|
7
9
|
- [Authentication Emulator](https://firebase.google.com/docs/emulator-suite/connect_auth)
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
> Cloud Firestore is a NoSQL, document-oriented database. Unlike a SQL database, there are no tables or rows. Instead, you store data in *documents*, which are organized into *collections*.
|
|
4
4
|
Each *document* contains a set of key-value pairs. Cloud Firestore is optimized for storing large collections of small documents.
|
|
5
5
|
|
|
6
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
7
|
+
|
|
6
8
|
## Using `AngularFirestoreCollection`
|
|
7
9
|
|
|
8
10
|
The `AngularFirestoreCollection` service is a wrapper around the native Firestore SDK's [`CollectionReference`](https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference) and [`Query`](https://firebase.google.com/docs/reference/js/firebase.firestore.Query) types. It is a generic service that provides you with a strongly typed set of methods for manipulating and streaming data. This service is designed for use as an `@Injectable()`.
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
> Cloud Firestore is a NoSQL, document-oriented database. Unlike a SQL database, there are no tables or rows. Instead, you store data in *documents*, which are organized into *collections*.
|
|
4
4
|
Each *document* contains a set of key-value pairs. Cloud Firestore is optimized for storing large collections of small documents.
|
|
5
5
|
|
|
6
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
7
|
+
|
|
6
8
|
## Using `AngularFirestoreDocument`
|
|
7
9
|
|
|
8
10
|
The `AngularFirestoreDocument` service is a wrapper around the native Firestore SDK's [`DocumentReference` type](https://firebase.google.com/docs/reference/js/firebase.firestore.DocumentReference). It is a generic service that provides you with a strongly typed set of methods for manipulating and streaming data. This service is designed for use as an `@Injectable()`.
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
> Cloud Firestore supports offline data persistence. This feature caches a copy of the Cloud Firestore data that your app is actively using, so your app can access the data when the device is offline. You can write, read, listen to, and query the cached data. When the device comes back online, Cloud Firestore synchronizes any local changes made by your app to the data stored remotely in Cloud Firestore.
|
|
4
4
|
|
|
5
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
6
|
+
|
|
5
7
|
**Offline persistence is an experimental feature that is supported only by the Chrome, Safari, and Firefox web browsers.** If a user opens multiple browser tabs that point to the same Cloud Firestore database, and offline persistence is enabled, Cloud Firestore will work correctly only in the first tab.
|
|
6
8
|
|
|
7
9
|
## Enable Offline Data in AngularFirestore
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
> Firestore has [powerful querying syntax](https://firebase.google.com/docs/firestore/query-data/queries) and the `AngularFirestoreCollection` provides a thin wrapper around it. This keeps you from having to learn two query syntax systems.
|
|
4
4
|
If you know the [Firestore query API](https://firebase.google.com/docs/reference/js/firebase.firestore.Query) then you know how to query in AngularFirestore.
|
|
5
5
|
|
|
6
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
7
|
+
|
|
6
8
|
## Creating a query with primitive/scalar values
|
|
7
9
|
|
|
8
10
|
Queries are created by building on the [`firebase.firestore.CollectionReference`](https://firebase.google.com/docs/reference/js/firebase.firestore.CollectionReference).
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
> The Cloud Functions for Firebase client SDKs let you call functions directly from a Firebase app. To call a function from your app in this way, write and deploy an HTTPS Callable function in Cloud Functions, and then add client logic to call the function from your app.
|
|
4
4
|
|
|
5
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
6
|
+
|
|
5
7
|
### Import the `NgModule`
|
|
6
8
|
|
|
7
9
|
Cloud Functions for AngularFire is contained in the `@angular/fire/functions` module namespace. Import the `AngularFireFunctionsModule` in your `NgModule`. This sets up the `AngularFireFunction` service for dependency injection.
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
> The FCM JavaScript API lets you receive notification messages in web apps running in browsers that support the Push API.
|
|
4
4
|
|
|
5
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
6
|
+
|
|
5
7
|
### AngularFireMessaging is not out-of-the-box compatible with the Angular Service Worker
|
|
6
8
|
|
|
7
9
|
If you are using the Angular Service Worker, you are not currently able to use AngularFireMessaging out-of-the-box.
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# Getting started with Performance Monitoring
|
|
2
2
|
|
|
3
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
4
|
+
|
|
3
5
|
## Automatic page load tracing
|
|
4
6
|
|
|
5
7
|
Understand your Angular application's real-world performance with [Firebase Performance Monitoring](https://firebase.google.com/docs/perf-mon). Performance Monitoring automatically provides a trace for **page load** when you add `AngularFirePerformanceModule` into your App Module's imports.
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
`AngularFireRemoteConfig` dynamically imports the `firebase/remote-config` library on demand, provides convenience observables, pipes, and a promisified version of the [Firebase Remote Config SDK (`firebase.remoteConfig.RemoteConfig`)](https://firebase.google.com/docs/reference/js/firebase.remoteconfig.RemoteConfig).
|
|
4
4
|
|
|
5
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
6
|
+
|
|
5
7
|
### API:
|
|
6
8
|
|
|
7
9
|
```ts
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# 3. Retrieving data as lists
|
|
2
2
|
|
|
3
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
4
|
+
|
|
3
5
|
> AngularFire synchronizes data as lists using the `AngularFireList` service.
|
|
4
6
|
|
|
5
7
|
The `AngularFireList` service is not created by itself, but through the `AngularFireDatabase` service.
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# 2. Retrieving data as objects
|
|
2
2
|
|
|
3
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
4
|
+
|
|
3
5
|
> The `AngularFireObject` is a service for manipulating and streaming object data.
|
|
4
6
|
|
|
5
7
|
The `AngularFireObject` service is not created by itself, but through the `AngularFireDatabase` service.
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# 4. Querying lists
|
|
2
2
|
|
|
3
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
4
|
+
|
|
3
5
|
## Creating a query with primitive/scalar values
|
|
4
6
|
|
|
5
7
|
Queries are created by building on the [`firebase.database.Reference`](https://firebase.google.com/docs/reference/js/firebase.database.Reference).
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
> Cloud Storage is designed to help you quickly and easily store and serve user-generated content, such as photos and videos.
|
|
4
4
|
|
|
5
|
+
> **NOTE**: [AngularFire has a new tree-shakable API](../../../README.md#developer-guide), you're looking at the documentation for the compatability version of the library. [See the v7 upgrade guide for more information on this change.](../../version-7-upgrade.md).
|
|
6
|
+
|
|
5
7
|
### Import the `NgModule`
|
|
6
8
|
|
|
7
9
|
Cloud Storage for AngularFire is contained in the `@angular/fire/storage` module namespace. Import the `AngularFireStorageModule` in your `NgModule`. This sets up the `AngularFireStorage` service for dependency injection.
|
package/docs/compat.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# AngularFire
|
|
2
|
+
The official [Angular](https://angular.io/) library for [Firebase](https://firebase.google.com/).
|
|
3
|
+
|
|
4
|
+
<strong><pre>ng add @angular/fire</pre></strong>
|
|
5
|
+
|
|
6
|
+
## Compatibility Developer Guide
|
|
7
|
+
|
|
8
|
+
AngularFire has a new tree-shakable API, you're looking at the documentation for the compatability version of the library. [Find the new developer guide here](../README.md#developer-guide).
|
|
9
|
+
|
|
10
|
+
[See the v7 upgrade guide for more information on this change.](version-7-upgrade.md).
|
|
11
|
+
|
|
12
|
+
### Monitor usage of your application in production
|
|
13
|
+
|
|
14
|
+
> `AngularFireAnalytics` provides a convenient method of interacting with Google Analytics in your Angular application. The provided `ScreenTrackingService` and `UserTrackingService` automatically log events when you're using the Angular Router or Firebase Authentication respectively. [Learn more about Google Analytics](https://firebase.google.com/docs/analytics).
|
|
15
|
+
|
|
16
|
+
- [Getting started with Google Analytics](compat/analytics/getting-started.md)
|
|
17
|
+
|
|
18
|
+
### Interacting with your database(s)
|
|
19
|
+
|
|
20
|
+
Firebase offers two cloud-based, client-accessible database solutions that support realtime data syncing. [Learn about the differences between them in the Firebase Documentation](https://firebase.google.com/docs/firestore/rtdb-vs-firestore).
|
|
21
|
+
|
|
22
|
+
#### Cloud Firestore
|
|
23
|
+
|
|
24
|
+
> `AngularFirestore` allows you to work with Cloud Firestore, the new flagship database for mobile app development. It improves on the successes of Realtime Database with a new, more intuitive data model. Cloud Firestore also features richer, faster queries and scales better than Realtime Database.
|
|
25
|
+
|
|
26
|
+
- [Documents](compat/firestore/documents.md)
|
|
27
|
+
- [Collections](compat/firestore/collections.md)
|
|
28
|
+
- [Querying Collections](compat/firestore/querying-collections.md)
|
|
29
|
+
- [Offline data](compat/firestore/offline-data.md)
|
|
30
|
+
|
|
31
|
+
#### Realtime Database
|
|
32
|
+
|
|
33
|
+
> `AngularFireDatabase` allows you to work with the Realtime Database, Firebase's original database. It's an efficient, low-latency solution for mobile apps that require synced states across clients in realtime.
|
|
34
|
+
|
|
35
|
+
- [Objects](compat/rtdb/objects.md)
|
|
36
|
+
- [Lists](compat/rtdb/lists.md)
|
|
37
|
+
- [Querying lists](compat/rtdb/querying-lists.md)
|
|
38
|
+
|
|
39
|
+
### Authenticate users
|
|
40
|
+
|
|
41
|
+
- [Getting started with Firebase Authentication](acompat/uth/getting-started.md)
|
|
42
|
+
- [Route users with AngularFire guards](compat/auth/router-guards.md)
|
|
43
|
+
|
|
44
|
+
### Local Emulator Suite
|
|
45
|
+
|
|
46
|
+
- [Getting started with Firebase Emulator Suite](compat/emulators/emulators.md)
|
|
47
|
+
|
|
48
|
+
### Upload files
|
|
49
|
+
|
|
50
|
+
- [Getting started with Cloud Storage](compat/storage/storage.md)
|
|
51
|
+
|
|
52
|
+
### Receive push notifications
|
|
53
|
+
|
|
54
|
+
- [Getting started with Firebase Messaging](compat/messaging/messaging.md)
|
|
55
|
+
|
|
56
|
+
### **BETA:** Change behavior and appearance of your application without deploying
|
|
57
|
+
|
|
58
|
+
> Firebase Remote Config is a cloud service that lets you change the behavior and appearance of your app without requiring users to download an app update. [Learn more about Remote Config](https://firebase.google.com/docs/remote-config).
|
|
59
|
+
|
|
60
|
+
- [Getting started with Remote Config](compat/remote-config/getting-started.md)
|
|
61
|
+
|
|
62
|
+
### Monitor your application performance in production
|
|
63
|
+
|
|
64
|
+
> Firebase Performance Monitoring is a service that helps you to gain insight into the performance characteristics of your iOS, Android, and web apps. [Learn more about Performance Monitoring](https://firebase.google.com/docs/perf-mon).
|
|
65
|
+
|
|
66
|
+
- [Getting started with Performance Monitoring](compat/performance/getting-started.md)
|
|
67
|
+
|
|
68
|
+
### Directly call Cloud Functions
|
|
69
|
+
|
|
70
|
+
- [Getting started with Callable Functions](compat/functions/functions.md)
|
package/docs/database.md
ADDED
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
<img align="right" width="30%" src="images/database-illo_1x.png">
|
|
2
|
+
|
|
3
|
+
<small>
|
|
4
|
+
<a href="https://github.com/angular/angularfire">AngularFire</a> ❱ <a href="../README.md#developer-guide">Developer Guide</a> ❱ Realtime Database
|
|
5
|
+
</small>
|
|
6
|
+
|
|
7
|
+
# Realtime Database
|
|
8
|
+
|
|
9
|
+
Store and sync data with our NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.
|
|
10
|
+
|
|
11
|
+
The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with our iOS, Android, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data. [Learn more about the Realtime Database](https://firebase.google.com/docs/database).
|
|
12
|
+
|
|
13
|
+
## Dependency Injection
|
|
14
|
+
|
|
15
|
+
As a prerequisite, ensure that `AngularFire` has been added to your project via
|
|
16
|
+
```bash
|
|
17
|
+
ng add @angular/fire
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Provide an RTBD instance in the application's `NgModule` (`app.module.ts`):
|
|
21
|
+
|
|
22
|
+
```ts
|
|
23
|
+
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
|
|
24
|
+
import { getDatabase, provideDatabase } from '@angular/fire/database';
|
|
25
|
+
|
|
26
|
+
@NgModule({
|
|
27
|
+
imports: [
|
|
28
|
+
provideFirebaseApp(() => initializeApp(environment.firebase)),
|
|
29
|
+
provideDatabase(() => getDatabase()),
|
|
30
|
+
]
|
|
31
|
+
})
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Next inject it into your component:
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import { Component, inject } from '@angular/core';
|
|
38
|
+
import { Database } from '@angular/fire/database';
|
|
39
|
+
|
|
40
|
+
@Component({...})
|
|
41
|
+
extend class DepartmentComponent {
|
|
42
|
+
private database: Database = inject(Database);
|
|
43
|
+
|
|
44
|
+
constructor() {
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
## Firebase API
|
|
50
|
+
|
|
51
|
+
AngularFire wraps the Firebase JS SDK to ensure proper functionality in Angular, while providing the same API.
|
|
52
|
+
|
|
53
|
+
Just change your imports from `import { ... } from 'firebase/database'` to `import { ... } from '@angular/fire/database'` and follow the offical documentation.
|
|
54
|
+
|
|
55
|
+
[Getting Started](https://firebase.google.com/docs/database/web/start) | [API Reference](https://firebase.google.com/docs/reference/js/database)
|
|
56
|
+
|
|
57
|
+
## Convenience observables
|
|
58
|
+
|
|
59
|
+
AngularFire provides observables to allow convenient use of the Realtime Database with RXJS.
|
|
60
|
+
|
|
61
|
+
### `object`
|
|
62
|
+
|
|
63
|
+
The `object()` function creates an observable that emits object changes.
|
|
64
|
+
|
|
65
|
+
| | |
|
|
66
|
+
|-----------------|------------------------------------------|
|
|
67
|
+
| **function** | `object(ref)` |
|
|
68
|
+
| **params** | ref: `Reference` |
|
|
69
|
+
| **return** | `Observable<QueryChange>` |
|
|
70
|
+
|
|
71
|
+
### `objectVal`
|
|
72
|
+
|
|
73
|
+
The `objectVal` function creates an observable that emits an array of object values, optionally with a mapped key.
|
|
74
|
+
|
|
75
|
+
| | |
|
|
76
|
+
|-----------------|-------------------------------------------------------|
|
|
77
|
+
| **function** | `objectVal(query, options?)` |
|
|
78
|
+
| **params** | query: `Reference\|Query`, options?: { keyField?: `string` } |
|
|
79
|
+
| **return** | `Observable<T>` |
|
|
80
|
+
|
|
81
|
+
### `list`
|
|
82
|
+
|
|
83
|
+
The `list()` function creates an observable that emits a sorted array for each child event change. The optional `events` parameter will filter which child events populate the array.
|
|
84
|
+
|
|
85
|
+
| | |
|
|
86
|
+
|-----------------|-------------------------------------------------------|
|
|
87
|
+
| **function** | `list(ref, options?)` |
|
|
88
|
+
| **params** | ref: `Reference\|Query`, options?: { events?: `ListenEvent[]` } |
|
|
89
|
+
| **return** | `Observable<QueryChange[]>` |
|
|
90
|
+
|
|
91
|
+
### `listVal`
|
|
92
|
+
|
|
93
|
+
The `listVal()` function creates an observable that emits an object mapped to its value, and optionally its key.
|
|
94
|
+
|
|
95
|
+
| | |
|
|
96
|
+
|-----------------|-------------------------------------------------------|
|
|
97
|
+
| **function** | `listVal(query, options?)` |
|
|
98
|
+
| **params** | ref: `Reference\|Query`, options?: { keyField?: `string` } |
|
|
99
|
+
| **return** | `Observable<T \| null>` |
|
|
100
|
+
|
|
101
|
+
### `stateChanges`
|
|
102
|
+
|
|
103
|
+
The `stateChanges()` function creates an observable that emits each time a change occurs at the reference or query passed. This is useful for tracking the changes in your list. The optional `events` parameter will filter which child events populate the array.
|
|
104
|
+
|
|
105
|
+
| | |
|
|
106
|
+
|-----------------|------------------------------------------------------|
|
|
107
|
+
| **function** | `stateChanges(ref, options?)` |
|
|
108
|
+
| **params** | ref: `Reference\|Query`, options:? { events?: `ListenEvent[]` } |
|
|
109
|
+
| **return** | `Observable<QueryChange>` |
|
|
110
|
+
|
|
111
|
+
### `auditTrail`
|
|
112
|
+
|
|
113
|
+
The `auditTrail()` function creates an observable that emits the entire state trail. This is useful for debugging or replaying the state of a list in your app. The optional `events` parameter will filter which child events populate the array.
|
|
114
|
+
|
|
115
|
+
| | |
|
|
116
|
+
|-----------------|------------------------------------------------------|
|
|
117
|
+
| **function** | `auditTrail(ref, options?)` |
|
|
118
|
+
| **params** | ref: `Reference\|Query`, options?: { events?: `ListenEvent[]` } |
|
|
119
|
+
| **return** | `Observable<QueryChange[]>` |
|
|
120
|
+
|
|
121
|
+
### `fromRef`
|
|
122
|
+
|
|
123
|
+
The `fromRef()` function creates an observable that emits reference changes.
|
|
124
|
+
|
|
125
|
+
| | |
|
|
126
|
+
|-----------------|------------------------------------------|
|
|
127
|
+
| **function** | `fromRef(ref, event)` |
|
|
128
|
+
| **params** | ref: `Reference\|Query`, event: `ListenEvent` |
|
|
129
|
+
| **return** | `Observable<QueryChange>` |
|
|
130
|
+
|
|
131
|
+
## Connecting to the emulator suite
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
import { connectDatabaseEmulator, getDatabase, provideDatabase } from '@angular/fire/database';
|
|
135
|
+
|
|
136
|
+
@NgModule({
|
|
137
|
+
imports: [
|
|
138
|
+
provideDatabase(() => {
|
|
139
|
+
const database = getDatabase();
|
|
140
|
+
connectDatabaseEmulator(database, 'localhost', 9000);
|
|
141
|
+
return database;
|
|
142
|
+
}),
|
|
143
|
+
]
|
|
144
|
+
})
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
## Working with multiple instances
|
|
148
|
+
|
|
149
|
+
```ts
|
|
150
|
+
import { provideFirebaseApp, FirebaseApp, initializeApp } from '@angular/fire/app';
|
|
151
|
+
import { getDatabase, provideDatabase } from '@angular/fire/database';
|
|
152
|
+
|
|
153
|
+
const DATABASE_SHARD_URLS = [
|
|
154
|
+
'https://FOO.firebaseio.com',
|
|
155
|
+
'https://BAR.firebaseio.com',
|
|
156
|
+
'https://BAZ.firebaseio.com',
|
|
157
|
+
];
|
|
158
|
+
|
|
159
|
+
@NgModule({
|
|
160
|
+
imports: [
|
|
161
|
+
provideFirebaseApp(() => initializeApp(environment.firebase)),
|
|
162
|
+
provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[0])),
|
|
163
|
+
provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[1])),
|
|
164
|
+
provideDatabase((app: FirebaseApp) => getDatabase(app, DATABASE_SHARD_URLS[2])),
|
|
165
|
+
]
|
|
166
|
+
})
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
```ts
|
|
170
|
+
import { DatabaseInstances } from '@angular/fire/database';
|
|
171
|
+
|
|
172
|
+
constructor(databases: DatabaseInstances) {
|
|
173
|
+
// databases => Database[]
|
|
174
|
+
}
|
|
175
|
+
```
|
|
@@ -91,7 +91,7 @@ To customize the deployment flow, you can use the configuration files you're alr
|
|
|
91
91
|
|
|
92
92
|
### Configuring Cloud Functions
|
|
93
93
|
|
|
94
|
-
Setting `functionsNodeVersion` and `functionsRuntimeOptions` in your `angular.json` allow you to
|
|
94
|
+
Setting `functionsNodeVersion` and `functionsRuntimeOptions` in your `angular.json` allow you to customize the version of Node.js Cloud Functions is running and run-time settings like timeout, VPC connectors, and memory.
|
|
95
95
|
|
|
96
96
|
```json
|
|
97
97
|
"deploy": {
|
|
@@ -201,4 +201,4 @@ The above configuration specifies the following:
|
|
|
201
201
|
2. `ng deploy projectName` will deploy the specified project with default configuration.
|
|
202
202
|
3. `ng deploy projectName --configuration=storybook --siteTarget=mySiteTarget` will deploy `projectName` to `mySiteTarget` with configuration`storybook`.
|
|
203
203
|
|
|
204
|
-
All of the options are optional
|
|
204
|
+
All of the options are optional
|