diff --git a/docs/1-install-and-setup.md b/docs/1-install-and-setup.md index a1273d60d..2b0f8ec61 100644 --- a/docs/1-install-and-setup.md +++ b/docs/1-install-and-setup.md @@ -56,7 +56,25 @@ npm install angularfire2 firebase --save Now that you have a new project setup, install AngularFire2 and Firebase from npm. -### 4. Setup @NgModule for the AngularFireModule +### 4. Add Firebase config to environments variable + +Open `/src/environments/environment.ts` and add your Firebase configuration: + +```ts +export const environment = { + production: false, + firebase: { + apiKey: '', + authDomain: '', + databaseURL: '', + projectId: '', + storageBucket: '', + messagingSenderId: '' + } +}; +``` + +### 5. Setup @NgModule for the AngularFireModule Open `/src/app/app.module.ts`, inject the Firebase providers, and specify your Firebase configuration. This 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'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularFireModule } from 'angularfire2'; - -// Must export the config -export const firebaseConfig = { - apiKey: '', - authDomain: '', - databaseURL: '', - storageBucket: '', - messagingSenderId: '' -}; +import { environment } from '../environments/environment'; @NgModule({ imports: [ BrowserModule, - AngularFireModule.initializeApp(firebaseConfig) + AngularFireModule.initializeApp(environment.firebase) ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] @@ -95,7 +105,7 @@ You can optionally provide a custom FirebaseApp name with `initializeApp`. @NgModule({ imports: [ BrowserModule, - AngularFireModule.initializeApp(firebaseConfig, 'my-app-name') + AngularFireModule.initializeApp(environment.firebase, 'my-app-name') ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] @@ -103,7 +113,7 @@ You can optionally provide a custom FirebaseApp name with `initializeApp`. export class AppModule {} ``` -### 5. Setup individual @NgModules +### 6. Setup individual @NgModules After adding the AngularFireModule you also need to add modules for the individual @NgModules that your application needs. - AngularFireAuthModule @@ -122,20 +132,12 @@ import { AppComponent } from './app.component'; import { AngularFireModule } from 'angularfire2'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { AngularFireAuthModule } from 'angularfire2/auth'; - -// Must export the config -export const firebaseConfig = { - apiKey: '', - authDomain: '', - databaseURL: '', - storageBucket: '', - messagingSenderId: '' -}; +import { environment } from '../environments/environment'; @NgModule({ imports: [ BrowserModule, - AngularFireModule.initializeApp(firebaseConfig, 'my-app-name'), // imports firebase/app needed for everything + AngularFireModule.initializeApp(environment.firebase, 'my-app-name'), // imports firebase/app needed for everything AngularFireDatabaseModule, // imports firebase/database, only needed for database features AngularFireAuthModule, // imports firebase/auth, only needed for auth features ], @@ -146,7 +148,7 @@ export class AppModule {} ``` -### 6. Inject AngularFireDatabase +### 7. Inject AngularFireDatabase 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): @@ -167,7 +169,7 @@ export class AppComponent { ``` -### 7. Bind to a list +### 8. Bind to a list In `/src/app/app.component.ts`: @@ -198,7 +200,7 @@ Open `/src/app/app.component.html`: ``` -### 8. Run your app +### 9. Run your app ```bash ng serve