@@ -56,7 +56,7 @@ npm install angularfire2 firebase --save
56
56
57
57
Now that you have a new project setup, install AngularFire2 and Firebase from npm.
58
58
59
- ### 4. Setup @NgModule
59
+ ### 4. Setup @NgModule for the AngularFireModule
60
60
61
61
Open ` /src/app/app.module.ts ` , inject the Firebase providers, and specify your Firebase configuration.
62
62
This can be found in your project at [ the Firebase Console] ( https://console.firebase.google.com ) :
@@ -103,8 +103,50 @@ You can optionally provide a custom FirebaseApp name with `initializeApp`.
103
103
export class AppModule {}
104
104
```
105
105
106
+ ### 5. Setup individual @NgModules
106
107
107
- ### 5. Inject AngularFireDatabase
108
+ After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
109
+ - AngularFireAuthModule
110
+ - AngularFireDatabaseModule
111
+ - AngularFireStorageModule (Future release)
112
+ - AngularFireMessagingModule (Future release)
113
+
114
+ #### Adding the Firebase Database and Auth Modules
115
+
116
+ For example if you application was using both Firebase authentication and the Firebase database you would add:
117
+
118
+ ``` ts
119
+ import { BrowserModule } from ' @angular/platform-browser' ;
120
+ import { NgModule } from ' @angular/core' ;
121
+ import { AppComponent } from ' ./app.component' ;
122
+ import { AngularFireModule } from ' angularfire2' ;
123
+ import { AngularFireDatabaseModule } from ' angularfire2/database' ;
124
+ import { AngularFireAuthModule } from ' angularfire2/auth' ;
125
+
126
+ // Must export the config
127
+ export const firebaseConfig = {
128
+ apiKey: ' <your-key>' ,
129
+ authDomain: ' <your-project-authdomain>' ,
130
+ databaseURL: ' <your-database-URL>' ,
131
+ storageBucket: ' <your-storage-bucket>' ,
132
+ messagingSenderId: ' <your-messaging-sender-id>'
133
+ };
134
+
135
+ @NgModule ({
136
+ imports: [
137
+ BrowserModule ,
138
+ AngularFireModule .initializeApp (firebaseConfig , ' my-app-name' ), // imports firebase/app needed for everything
139
+ AngularFireDatabaseModule , // imports firebase/database, only needed for database features
140
+ AngularFireAuthModule , // imports firebase/auth, only needed for auth features
141
+ ],
142
+ declarations: [ AppComponent ],
143
+ bootstrap: [ AppComponent ]
144
+ })
145
+ export class AppModule {}
146
+
147
+ ```
148
+
149
+ ### 6. Inject AngularFireDatabase
108
150
109
151
Open ` /src/app/app.component.ts ` , and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
110
152
@@ -125,7 +167,7 @@ export class AppComponent {
125
167
126
168
```
127
169
128
- ### 6 . Bind to a list
170
+ ### 7 . Bind to a list
129
171
130
172
In ` /src/app/app.component.ts ` :
131
173
@@ -156,7 +198,7 @@ Open `/src/app/app.component.html`:
156
198
</ul >
157
199
```
158
200
159
- ### 7 . Run your app
201
+ ### 8 . Run your app
160
202
161
203
``` bash
162
204
ng serve
0 commit comments