Skip to content

Commit 85ae252

Browse files
fisherdsdavideast
authored andcommitted
Add information about individual @ngModules (#942)
* Add information about individual @ngModules Copied some material from #854 into this doc * add comments based on feedback
1 parent 0d7c582 commit 85ae252

File tree

1 file changed

+46
-4
lines changed

1 file changed

+46
-4
lines changed

docs/1-install-and-setup.md

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ npm install angularfire2 firebase --save
5656

5757
Now 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

6161
Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration.
6262
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`.
103103
export 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

109151
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):
110152

@@ -125,7 +167,7 @@ export class AppComponent {
125167

126168
```
127169

128-
### 6. Bind to a list
170+
### 7. Bind to a list
129171

130172
In `/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
162204
ng serve

0 commit comments

Comments
 (0)