@@ -56,7 +56,25 @@ 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 for the AngularFireModule
59+ ### 4. Add Firebase config to environments variable
60+
61+ Open ` /src/environments/environment.ts ` and add your Firebase configuration:
62+
63+ ``` ts
64+ export const environment = {
65+ production: false ,
66+ firebase: {
67+ apiKey: ' <your-key>' ,
68+ authDomain: ' <your-project-authdomain>' ,
69+ databaseURL: ' <your-database-URL>' ,
70+ projectId: ' <your-project-id>' ,
71+ storageBucket: ' <your-storage-bucket>' ,
72+ messagingSenderId: ' <your-messaging-sender-id>'
73+ }
74+ };
75+ ```
76+
77+ ### 5. Setup @NgModule for the AngularFireModule
6078
6179Open ` /src/app/app.module.ts ` , inject the Firebase providers, and specify your Firebase configuration.
6280This can be found in your project at [ the Firebase Console] ( https://console.firebase.google.com ) :
@@ -66,20 +84,12 @@ import { BrowserModule } from '@angular/platform-browser';
6684import { NgModule } from ' @angular/core' ;
6785import { AppComponent } from ' ./app.component' ;
6886import { AngularFireModule } from ' angularfire2' ;
69-
70- // Must export the config
71- export const firebaseConfig = {
72- apiKey: ' <your-key>' ,
73- authDomain: ' <your-project-authdomain>' ,
74- databaseURL: ' <your-database-URL>' ,
75- storageBucket: ' <your-storage-bucket>' ,
76- messagingSenderId: ' <your-messaging-sender-id>'
77- };
87+ import { environment } from ' ../environments/environment' ;
7888
7989@NgModule ({
8090 imports: [
8191 BrowserModule ,
82- AngularFireModule .initializeApp (firebaseConfig )
92+ AngularFireModule .initializeApp (environment . firebase )
8393 ],
8494 declarations: [ AppComponent ],
8595 bootstrap: [ AppComponent ]
@@ -95,15 +105,15 @@ You can optionally provide a custom FirebaseApp name with `initializeApp`.
95105@NgModule ({
96106 imports: [
97107 BrowserModule ,
98- AngularFireModule .initializeApp (firebaseConfig , ' my-app-name' )
108+ AngularFireModule .initializeApp (environment . firebase , ' my-app-name' )
99109 ],
100110 declarations: [ AppComponent ],
101111 bootstrap: [ AppComponent ]
102112})
103113export class AppModule {}
104114```
105115
106- ### 5 . Setup individual @NgModules
116+ ### 6 . Setup individual @NgModules
107117
108118After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs.
109119 - AngularFireAuthModule
@@ -122,20 +132,12 @@ import { AppComponent } from './app.component';
122132import { AngularFireModule } from ' angularfire2' ;
123133import { AngularFireDatabaseModule } from ' angularfire2/database' ;
124134import { 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- };
135+ import { environment } from ' ../environments/environment' ;
134136
135137@NgModule ({
136138 imports: [
137139 BrowserModule ,
138- AngularFireModule .initializeApp (firebaseConfig , ' my-app-name' ), // imports firebase/app needed for everything
140+ AngularFireModule .initializeApp (environment . firebase , ' my-app-name' ), // imports firebase/app needed for everything
139141 AngularFireDatabaseModule , // imports firebase/database, only needed for database features
140142 AngularFireAuthModule , // imports firebase/auth, only needed for auth features
141143 ],
@@ -146,7 +148,7 @@ export class AppModule {}
146148
147149```
148150
149- ### 6 . Inject AngularFireDatabase
151+ ### 7 . Inject AngularFireDatabase
150152
151153Open ` /src/app/app.component.ts ` , and make sure to modify/delete any tests to get the sample working (tests are still important, you know):
152154
@@ -167,7 +169,7 @@ export class AppComponent {
167169
168170```
169171
170- ### 7 . Bind to a list
172+ ### 8 . Bind to a list
171173
172174In ` /src/app/app.component.ts ` :
173175
@@ -198,7 +200,7 @@ Open `/src/app/app.component.html`:
198200</ul >
199201```
200202
201- ### 8 . Run your app
203+ ### 9 . Run your app
202204
203205``` bash
204206ng serve
0 commit comments