@@ -56,7 +56,7 @@ npm install angularfire2 firebase --save
5656
5757Now that you have a new project setup, install AngularFire2 and Firebase from npm.
5858
59- ### 4. Setup @NgModule
59+ ### 4. Setup @NgModule for the AngularFireModule
6060
6161Open ` /src/app/app.module.ts ` , inject the Firebase providers, and specify your Firebase configuration.
6262This 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`.
103103export class AppModule {}
104104```
105105
106+ ### 5. Setup individual @NgModules
106107
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
108150
109151Open ` /src/app/app.component.ts ` , and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
110152
@@ -125,7 +167,7 @@ export class AppComponent {
125167
126168```
127169
128- ### 6 . Bind to a list
170+ ### 7 . Bind to a list
129171
130172In ` /src/app/app.component.ts ` :
131173
@@ -156,7 +198,7 @@ Open `/src/app/app.component.html`:
156198</ul >
157199```
158200
159- ### 7 . Run your app
201+ ### 8 . Run your app
160202
161203``` bash
162204ng serve
0 commit comments