Skip to content

Commit 59b5934

Browse files
jamesdanielsjamesdaniels
committed
Getting README rolling
1 parent f4ca651 commit 59b5934

21 files changed

+103
-90
lines changed

‎README.md

+17-4
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,26 @@ AngularFire smooths over the rough edges an Angular developer might encounter wh
1414
- **Google Analytics** - Zero-effort Angular Router awareness in Google Analytics
1515
- **Router Guards** - Guard your Angular routes with built-in Firebase Authentication checks
1616

17+
---
18+
19+
> **WARNING**: This branch is the work in progress for version 7 of AngularFire. [You can find version 6 here](https://github.com/angular/angularfire), if you're looking for documentation or to contribute to stable.
20+
21+
---
22+
1723
## Example use
1824

1925
```ts
2026
import { Component } from '@angular/core';
21-
import { Firestore } from '@angular/fire';
22-
import { Observable, valueChanges } from 'rxjs';
27+
import { Firestore, collectionData } from '@angular/fire/firestore';
28+
import { Observable } from 'rxjs';
2329
import { collection } from 'firebase/firestore';
2430

31+
interface Item {
32+
id: string,
33+
name: string,
34+
...
35+
};
36+
2537
@Component({
2638
selector: 'app-root',
2739
template: `
@@ -33,9 +45,10 @@ import { collection } from 'firebase/firestore';
3345
`
3446
})
3547
export class MyApp {
36-
item$: Observable<any[]>;
48+
item$: Observable<Item[]>;
3749
constructor(firestore: Firestore) {
38-
this.item$ = valueChanges(collection(firestore, 'items'));
50+
const collection = collection(firestore, 'items');
51+
this.item$ = collectionData(collection, 'id');
3952
}
4053
}
4154
```

‎docs/analytics/getting-started.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ CONFIG = InjectionToken<Config>;
2727
### Usage:
2828

2929
```ts
30-
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
30+
import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
3131

3232
@NgModule({
3333
imports: [
@@ -43,7 +43,7 @@ export class AppModule { }
4343
In your component you can then dependency inject `AngularFireAnalytics` and make calls against the SDK:
4444

4545
```ts
46-
import { AngularFireAnalytics } from '@angular/fire/analytics';
46+
import { AngularFireAnalytics } from '@angular/fire/compat/analytics';
4747

4848
constructor(analytics: AngularFireAnalytics) {
4949
analytics.logEvent('custom_event', { ... });
@@ -55,7 +55,7 @@ constructor(analytics: AngularFireAnalytics) {
5555
You can log [`screen_view` events](https://firebase.google.com/docs/reference/js/firebase.analytics.Analytics.html#parameters_10) yourself of course, but AngularFire provides the `ScreenTrackingService` which automatically integrates with the Angular Router to provide Firebase with screen view tracking. You simply can integrate like so:
5656

5757
```ts
58-
import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/analytics';
58+
import { AngularFireAnalyticsModule, ScreenTrackingService } from '@angular/fire/compat/analytics';
5959

6060
@NgModule({
6161
imports: [
@@ -77,7 +77,7 @@ To enrich your Analytics data you can track the currently signed in user by sett
7777

7878

7979
```ts
80-
import { AngularFireAnalyticsModule, UserTrackingService } from '@angular/fire/analytics';
80+
import { AngularFireAnalyticsModule, UserTrackingService } from '@angular/fire/compat/analytics';
8181

8282
@NgModule({
8383
imports: [
@@ -100,7 +100,7 @@ export class AppModule { }
100100
Using the `CONFIG` DI Token (*default: {}*) will allow you to configure Google Analytics. E.g, you could skip sending the initial `page_view` event, anonymize IP addresses, and disallow ads personalization signals for all events like so:
101101

102102
```ts
103-
import { AngularFireAnalyticsModule, CONFIG } from '@angular/fire/analytics';
103+
import { AngularFireAnalyticsModule, CONFIG } from '@angular/fire/compat/analytics';
104104

105105
@NgModule({
106106
imports: [

‎docs/auth/getting-started.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ the Firebase docs for more information on what methods are available.](https://f
1010

1111
```ts
1212
import { Component } from '@angular/core';
13-
import { AngularFireAuth } from '@angular/fire/auth';
13+
import { AngularFireAuth } from '@angular/fire/compat/auth';
1414
import firebase from 'firebase/app';
1515

1616
@Component({

‎docs/auth/router-guards.md

+5-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
`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:
44

55
```ts
6-
import { AngularFireAuthGuard } from '@angular/fire/auth-guard';
6+
import { AngularFireAuthGuard } from '@angular/fire/compat/auth-guard';
77

88
export const routes: Routes = [
99
{ path: '', component: AppComponent },
@@ -29,7 +29,7 @@ The `auth-guard` module provides the following pre-built pipes:
2929
Example use:
3030

3131
```ts
32-
import { AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/auth-guard';
32+
import { AngularFireAuthGuard, hasCustomClaim, redirectUnauthorizedTo, redirectLoggedInTo } from '@angular/fire/compat/auth-guard';
3333

3434
const adminOnly = () => hasCustomClaim('admin');
3535
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);
@@ -48,7 +48,7 @@ export const routes: Routes = [
4848
Use the provided `canActivate` helper and spread syntax to make your routes more readable:
4949

5050
```ts
51-
import { canActivate } from '@angular/fire/auth-guard';
51+
import { canActivate } from '@angular/fire/compat/auth-guard';
5252

5353
export const routes: Routes = [
5454
{ path: '', component: AppComponent },
@@ -76,7 +76,7 @@ The `auth-guard` modules provides a `customClaims` operator to reduce boiler pla
7676
```ts
7777
import { pipe } from 'rxjs';
7878
import { map } from 'rxjs/operators';
79-
import { customClaims } from '@angular/fire/auth-guard';
79+
import { customClaims } from '@angular/fire/compat/auth-guard';
8080

8181
// This pipe will only allow users with the editor role to access the route
8282
// { path: 'articles/:id/edit', component: ArticleEditComponent, ...canActivate(editorOnly) }
@@ -90,7 +90,7 @@ const editorOnly = () => pipe(customClaims, map(claims => claims.role === 'edito
9090
```ts
9191
import { pipe } from 'rxjs';
9292
import { map } from 'rxjs/operators';
93-
import { customClaims } from '@angular/fire/auth-guard';
93+
import { customClaims } from '@angular/fire/compat/auth-guard';
9494

9595
// Only allow navigation to the route if :userId matches the authenticated user's uid
9696
// { path: 'user/:userId/edit', component: ProfileEditComponent, ...canActivate(onlyAllowSelf) }

‎docs/emulators/emulators.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@ Each module (database, firestore, auth, function) provides `USE_EMULATOR` token
6969
Import these tokens at your `app.module.ts` as follow:
7070

7171
```ts
72-
import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/auth';
73-
import { USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/database';
74-
import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/firestore';
75-
import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/functions';
72+
import { USE_EMULATOR as USE_AUTH_EMULATOR } from '@angular/fire/compat/auth';
73+
import { USE_EMULATOR as USE_DATABASE_EMULATOR } from '@angular/fire/compat/database';
74+
import { USE_EMULATOR as USE_FIRESTORE_EMULATOR } from '@angular/fire/compat/firestore';
75+
import { USE_EMULATOR as USE_FUNCTIONS_EMULATOR } from '@angular/fire/compat/functions';
7676

7777
@NgModule({
7878
// ... Existing configuration
@@ -93,7 +93,7 @@ Also you can opt-in the new way of setting the Cloud Functions [origin](https://
9393

9494
```ts
9595
import { isDevMode, NgModule } from '@angular/core';
96-
import { ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/functions';
96+
import { ORIGIN as FUNCTIONS_ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/compat/functions';
9797

9898
@NgModule({
9999
// ... Existing configuration
@@ -111,9 +111,9 @@ export class AppModule { }
111111
With the exception of the Auth Emulator, the old way of setting the `host` and `port` for each emulator was done using a different set of tokens by passing the entire url path as string.
112112

113113
```ts
114-
import { URL as DATABASE_URL } from '@angular/fire/database';
115-
import { ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/functions';
116-
import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/firestore';
114+
import { URL as DATABASE_URL } from '@angular/fire/compat/database';
115+
import { ORIGIN as FUNCTIONS_ORIGIN } from '@angular/fire/compat/functions';
116+
import { SETTINGS as FIRESTORE_SETTINGS } from '@angular/fire/compat/firestore';
117117

118118
@NgModule({
119119
// ... Existing configuration

‎docs/firestore/collections.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ The `AngularFirestoreCollection` service is a wrapper around the native Firestor
99

1010
```ts
1111
import { Component } from '@angular/core';
12-
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
12+
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
1313
import { Observable } from 'rxjs';
1414

1515
export interface Item { name: string; }
@@ -87,7 +87,7 @@ There are multiple ways of streaming collection data from Firestore.
8787

8888
```ts
8989
import { Component } from '@angular/core';
90-
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
90+
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
9191
import { Observable } from 'rxjs';
9292

9393
export interface Item { id: string; name: string; }
@@ -132,7 +132,7 @@ export class AppComponent {
132132

133133
```ts
134134
import { Component } from '@angular/core';
135-
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
135+
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
136136
import { Observable } from 'rxjs';
137137
import { map } from 'rxjs/operators';
138138

@@ -180,7 +180,7 @@ export class AppComponent {
180180

181181
```ts
182182
import { Component } from '@angular/core';
183-
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
183+
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
184184
import { Observable } from 'rxjs';
185185
import { map } from 'rxjs/operators';
186186

@@ -225,7 +225,7 @@ export class AppComponent {
225225

226226
```ts
227227
import { Component } from '@angular/core';
228-
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
228+
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
229229
import { Observable } from 'rxjs';
230230
import { map } from 'rxjs/operators';
231231

@@ -275,7 +275,7 @@ There are three `DocumentChangeType`s in Firestore: `added`, `removed`, and `mod
275275

276276
```ts
277277
import { Component } from '@angular/core';
278-
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/firestore';
278+
import { AngularFirestore, AngularFirestoreCollection } from '@angular/fire/compat/firestore';
279279
import { Observable } from 'rxjs';
280280

281281
@Component({

‎docs/firestore/documents.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ The `AngularFirestoreDocument` service is a wrapper around the native Firestore
99

1010
```ts
1111
import { Component } from '@angular/core';
12-
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';
12+
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/compat/firestore';
1313
import { Observable } from 'rxjs';
1414

1515
export interface Item { name: string; }

‎docs/firestore/offline-data.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ To enable offline persistence in your AngularFire application, call `enablePersi
1212
import { BrowserModule } from '@angular/platform-browser';
1313
import { NgModule } from '@angular/core';
1414
import { AppComponent } from './app.component';
15-
import { AngularFireModule } from '@angular/fire';
16-
import { AngularFirestoreModule } from '@angular/fire/firestore';
17-
import { AngularFireAuthModule } from '@angular/fire/auth';
15+
import { AngularFireModule } from '@angular/fire/compat';
16+
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
17+
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
1818
import { environment } from '../environments/environment';
1919

2020
@NgModule({

‎docs/firestore/querying-collections.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ size$.next('small');
8383

8484
```ts
8585
import { Component } from '@angular/core';
86-
import { AngularFirestore } from '@angular/fire/firestore';
86+
import { AngularFirestore } from '@angular/fire/compat/firestore';
8787
import { Observable, BehaviorSubject, combineLatest } from 'rxjs';
8888
import { switchMap } from 'rxjs/operators';
8989

‎docs/functions/functions.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ Cloud Functions for AngularFire is contained in the `@angular/fire/functions` mo
1010
import { BrowserModule } from '@angular/platform-browser';
1111
import { NgModule } from '@angular/core';
1212
import { AppComponent } from './app.component';
13-
import { AngularFireModule } from '@angular/fire';
14-
import { AngularFireFunctionsModule } from '@angular/fire/functions';
13+
import { AngularFireModule } from '@angular/fire/compat';
14+
import { AngularFireFunctionsModule } from '@angular/fire/compat/functions';
1515
import { environment } from '../environments/environment';
1616

1717
@NgModule({
@@ -32,7 +32,7 @@ Once the `AngularFireFunctionsModule` is registered you can inject the `AngularF
3232

3333
```ts
3434
import { Component } from '@angular/core';
35-
import { AngularFireFunctions } from '@angular/fire/functions';
35+
import { AngularFireFunctions } from '@angular/fire/compat/functions';
3636

3737
@Component({
3838
selector: 'app-component',
@@ -53,7 +53,7 @@ AngularFireFunctions is super easy. You create a function on the server side and
5353
```ts
5454

5555
import { Component } from '@angular/core';
56-
import { AngularFireFunctions } from '@angular/fire/functions';
56+
import { AngularFireFunctions } from '@angular/fire/compat/functions';
5757

5858
@Component({
5959
selector: 'app-root',
@@ -77,7 +77,7 @@ Allow configuration of the Function's region by adding `REGION` to the `provider
7777

7878
```ts
7979
import { NgModule } from '@angular/core';
80-
import { AngularFireFunctionsModule, REGION } from '@angular/fire/functions';
80+
import { AngularFireFunctionsModule, REGION } from '@angular/fire/compat/functions';
8181

8282
@NgModule({
8383
imports: [
@@ -100,7 +100,7 @@ Point callable Functions to the Cloud Function emulator by adding `USE_EMULATOR`
100100

101101
```ts
102102
import { NgModule } from '@angular/core';
103-
import { AngularFireFunctionsModule, USE_EMULATOR } from '@angular/fire/functions';
103+
import { AngularFireFunctionsModule, USE_EMULATOR } from '@angular/fire/compat/functions';
104104

105105
@NgModule({
106106
imports: [
@@ -145,7 +145,7 @@ Deploy your hosting project to the new settings go into effect, finally configur
145145

146146
```ts
147147
import { NgModule } from '@angular/core';
148-
import { AngularFireFunctionsModule, ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/functions';
148+
import { AngularFireFunctionsModule, ORIGIN, NEW_ORIGIN_BEHAVIOR } from '@angular/fire/compat/functions';
149149

150150
@NgModule({
151151
imports: [

‎docs/install-and-setup.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your F
4646
import { BrowserModule } from '@angular/platform-browser';
4747
import { NgModule } from '@angular/core';
4848
import { AppComponent } from './app.component';
49-
import { AngularFireModule } from '@angular/fire';
49+
import { AngularFireModule } from '@angular/fire/compat';
5050
import { environment } from '../environments/environment';
5151

5252
@NgModule({
@@ -70,9 +70,9 @@ For example if your application was using both Google Analytics and the Firestor
7070
import { BrowserModule } from '@angular/platform-browser';
7171
import { NgModule } from '@angular/core';
7272
import { AppComponent } from './app.component';
73-
import { AngularFireModule } from '@angular/fire';
74-
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';
75-
import { AngularFirestoreModule } from '@angular/fire/firestore';
73+
import { AngularFireModule } from '@angular/fire/compat';
74+
import { AngularFireAnalyticsModule } from '@angular/fire/compat/analytics';
75+
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
7676
import { environment } from '../environments/environment';
7777

7878
@NgModule({
@@ -94,7 +94,7 @@ Open `/src/app/app.component.ts`, and make sure to modify/delete any tests to ge
9494

9595
```ts
9696
import { Component } from '@angular/core';
97-
import { AngularFirestore } from '@angular/fire/firestore';
97+
import { AngularFirestore } from '@angular/fire/compat/firestore';
9898

9999
@Component({
100100
selector: 'app-root',
@@ -114,7 +114,7 @@ In `/src/app/app.component.ts`:
114114

115115
```ts
116116
import { Component } from '@angular/core';
117-
import { AngularFirestore } from '@angular/fire/firestore';
117+
import { AngularFirestore } from '@angular/fire/compat/firestore';
118118
import { Observable } from 'rxjs';
119119

120120
@Component({

‎docs/ionic/authentication.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ Go to [Firebase console](https://console.firebase.google.com/) then click **Add
4848
In `login.service.ts` add this function:
4949
```ts
5050

51-
import { AngularFireAuth } from '@angular/fire/auth';
51+
import { AngularFireAuth } from '@angular/fire/compat/auth';
5252
import firebase from 'firebase/app';
5353
import AuthProvider = firebase.auth.AuthProvider;
5454

0 commit comments

Comments
 (0)