1 | # Upgrading to AngularFire2 4.0
|
2 |
|
3 | AngularFire2 4.0 is a refactor of the AngularFire2 package which implements
|
4 | @NgModule, simplifies authentication, and better supports Angular 4.
|
5 |
|
6 | ### Removing `AngularFire` for Modularity
|
7 |
|
8 | Prior to 4.0, AngularFire2 did not take advantage of the Firebase SDK's modularity for tree shaking. The `AngularFire` service has now been removed and the library is broken up into smaller `@NgModule`s:
|
9 |
|
10 | * `AngularFireModule`
|
11 | * `AngularFireDatabaseModule`
|
12 | * `AngularFireAuthModule`
|
13 |
|
14 | When upgrading, replace calls to `AngularFire.database` and `AngularFire.auth` with `AngularFireDatabase` and `AngularFireAuth` respectively.
|
15 |
|
16 | ```typescript
|
17 | constructor(af: AngularFire) {
|
18 | af.database.list('foo');
|
19 | af.auth;
|
20 | }
|
21 | ```
|
22 | Should now be:
|
23 |
|
24 | ```typescript
|
25 | constructor(db: AngularFireDatabase, afAuth: AngularFireAuth) {
|
26 | db.list('foo');
|
27 | afAuth.authState;
|
28 | }
|
29 | ```
|
30 |
|
31 | ### Simplified Authentication API
|
32 |
|
33 | In 4.0 we've reduced the complexity of the auth module by providing only [`firebase.User`](https://firebase.google.com/docs/reference/js/firebase.User) observers (`AngularFireAuth.authState`, `AngularFireAuth.idToken`) and cutting the methods that were wrapping the Firebase SDK.
|
34 |
|
35 |
|
36 | ```typescript
|
37 | import { AngularFireAuth } from 'angularfire2/auth';
|
38 | // Do not import from 'firebase' as you'd lose the tree shaking benefits
|
39 | import firebase from 'firebase/app';
|
40 | ...
|
41 |
|
42 | user: Observable<firebase.User>;
|
43 | constructor(afAuth: AngularFireAuth) {
|
44 | this.user = afAuth.authState; // only triggered on sign-in/out (for old behavior use .idToken)
|
45 | }
|
46 | ```
|
47 |
|
48 | AngularFire2 exposes the raw Firebase Auth object via `AngularFireAuth.auth`. For actions like login, logout, user creation, etc. you should use the [methods available to `firebase.auth.Auth`](https://firebase.google.com/docs/reference/js/firebase.auth.Auth).
|
49 |
|
50 | While convenient, the pre-configured login feature added unneeded complexity. `AngularFireModule.initializeApp` no longer takes a default sign in method. Sign in should be done with the Firebase SDK via `firebase.auth.Auth`:
|
51 |
|
52 | ```typescript
|
53 | login() {
|
54 | this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
|
55 | }
|
56 | logout() {
|
57 | this.afAuth.auth.signOut();
|
58 | }
|
59 | ```
|
60 |
|
61 | ### FirebaseListFactory and FirebaseObjectFactory API Changes
|
62 |
|
63 | If you directly use `FirebaseListFactory` or `FirebaseObjectFactory` you will no longer be able to pass in a string, it will instead expect a Firebase database reference.
|
64 |
|
65 | ## Putting this all together
|
66 |
|
67 | Here's an example of what AngularFire2 4.0 looks like:
|
68 |
|
69 | ```typescript
|
70 | import { NgModule, Component } from '@angular/core';
|
71 | import { Observable } from 'rxjs/Observable';
|
72 | import { AngularFireModule } from 'angularfire2';
|
73 | import { AngularFireDatabaseModule, AngularFireDatabase, FirebaseListObservable } from 'angularfire2/database';
|
74 | import { AngularFireAuthModule, AngularFireAuth } from 'angularfire2/auth';
|
75 | import { environment } from '../environments/environment';
|
76 |
|
77 | // Do not import from 'firebase' as you'd lose the tree shaking benefits
|
78 | import firebase from 'firebase/app';
|
79 |
|
80 |
|
81 | @NgModule({
|
82 | declarations: [ App ],
|
83 | exports: [ App ],
|
84 | imports: [
|
85 | AngularFireModule.initializeApp(environment.firebase, 'my-app'),
|
86 | AngularFireDatabaseModule,
|
87 | AngularFireAuthModule
|
88 | ],
|
89 | bootstrap: [ App ]
|
90 | })
|
91 | export class MyModule { }
|
92 |
|
93 | ```
|
94 |
|
95 | ```typescript
|
96 | @Component({
|
97 | selector: 'my-app',
|
98 | template: `
|
99 | <div> {{ (items | async)? | json }} </div>
|
100 | <div> {{ (user | async)? | json }} </div>
|
101 | <button (click)="login()">Login</button>
|
102 | <button (click)="logout()">Logout</button>
|
103 | `
|
104 | })
|
105 | export class App {
|
106 | user: Observable<firebase.User>;
|
107 | items: FirebaseListObservable<any[]>;
|
108 | constructor(afAuth: AngularFireAuth, db: AngularFireDatabase) {
|
109 | this.user = afAuth.authState;
|
110 | this.items = db.list('items');
|
111 | }
|
112 | login() {
|
113 | this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
|
114 | }
|
115 | logout() {
|
116 | this.afAuth.auth.signOut();
|
117 | }
|
118 | }
|
119 | ```
|