Include AngularFire

Firebase is a mobile and web application platform with tools and infrastructure designed to help developers build high-quality apps. AngularFire2 is the official Angular library to use Firebase in your apps.

Create new project

Create a new project and navigate into the project.

$ ng new my-app
$ cd my-app

Install dependencies

In the new project you need to install the required dependencies.

$ npm install --save angularfire2 firebase

Get Firebase configuration details

In order to connect AngularFire to Firebase you need to get the configuration details.

Firebase offers an easy way to get this, by showing a JavaScript object that you can copy and paste.

Log in to the Firebase console.
Create New Project or open an existing one.
Click Add Firebase to your web app.
From the modal window that pops up you copy the config object.

  var config = {
    apiKey: "your-api-key",
    authDomain: "your-auth-domain",
    databaseURL: "your-database-url",
    storageBucket: "your-storage-bucket",
    messagingSenderId: "your-message-sender-id"
  };

Configure the Environment

These configuration details need to be stored in our app, one way to do this using the environment. This allows you to use different credentials in development and production.

Open src/environments/environment.ts and add a key firebase to the exported constant:

export const environment = {
  production: false,
  firebase: {
    apiKey: 'your-api-key',
    authDomain: 'your-auth-domain',
    databaseURL: 'your-database-url',
    storageBucket: 'your-storage-bucket',
  }
};

To define the keys for production you need to update src/environments/environment.prod.ts.

Import and load FirebaseModule

The final step is to import AngularFireModule and initialize it using the parameters from the environment.

Open src/app/app.module.ts and add the following lines on the top of the file, with the other imports:

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';

To initialize AngularFire add the following line to the imports array inside the NgModule:

@NgModule({
  // declarations
  imports: [
    // BrowserModule, etc
    AngularFireModule.initializeApp(environment.firebase),
  ]
  // providers
  // bootstrap
})

2.7 KiB Raw Blame History