/ firebase

Setting up AngularFire2 in an Angular Project

Firebase is a platform that allows us to add a vast amount of power to our applications. It offers everything from real time database, handles authentication with options from SMS, email to a variety of social platforms, as well as offering analytics, push notifications, and much more.

One of the powers of Firebase is the easy to use SDK, and using Firebase in our Angular projects is easier than ever! Let's take a look at how we can do this.

Project Setup

As we're creating an Angular project, the Angular CLI must be installed on your machine (or you can use npx!). We can then create a new project named AngularFirebaseTutorial.

# Install the Angular CLI globally
$ npm install @angular-cli -g

# Create a new project
$ ng new AngularFirebaseTutorial

# Navigate to the project directory
$ cd AngularFireTutorial

If the response looks similar to below, the project will have been correctly initialised:

New Angular Project

At this point in time we also need to add both the firebase and angularfire2 dependencies to our project. This can be done via npm:

# Install dependencies. If you're running [email protected] < --save will be necessary
$ npm install firebase angularfire2

We can then open this up inside Visual Studio Code with code ., the period ensures that our editor is opened in the current directory.

If you see peer dependency warnings similar to the image below, it shouldn't make a difference to the project outcome. If for any reason you find you're having errors with Firebase, then downgrade your Angular version to the one requested by the peer dependency.

Installing Dependencies

Firebase Setup

To get started, navigate to firebase.google.com and select 'GO TO CONSOLE' on the top right navigation bar. This will send us to the Firebase dashboard, where we can create a new project.

Firebase Website

The Firebase Dashboard can be thought of us as the hub for each one of our projects. We're able to create a new project by hitting the '+ Add Project' button.

Firebase Dashboard

The project creation process is super simple, once we fill in a project name and location, we're able to use all of the Firebase features.

New Project

All we need to do now is capture the API information, as we're adding this to an Angular application we'll need to select 'Add Firebase to your web app'.

Add Firebase to your web app

In the next popup, you'll be given the initialisation code for a standard Firebase application (i.e. the JavaScript SDK). As we're using AngularFire2, the setup process is a little different, so ensure to only copy the object values rather than the surrounding code.

We're now finished with the Firebase dashboard and can go back to our project. Let's initialise Firebase inside of our Angular application.

Firebase Initialisation

To add Firebase inside of our Angular project, we'll need to ad our Firebase project information to our src/environments/environment.ts:

export const environment = {
  production: false,
  firebase: {
    apiKey: '<your-key>',
    authDomain: '<your-project-authdomain>',
    databaseURL: '<your-database-URL>',
    projectId: '<your-project-id>',
    storageBucket: '<your-storage-bucket>',
    messagingSenderId: '<your-messaging-sender-id>'
  }
};

Finally, we'll need to add the appropriate AngularFireModule to our root src/app/app.module.ts. By passing our environment information to the initializeApp() function, Firebase is able to know everything about our project.

import { BrowserModule } from [email protected]/platform-browser';
import { NgModule } from [email protected]/core';
import { AngularFireModule } from 'angularfire2';

import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thats it! We can then use AngularFire from within our project. At the time of writing, AngularFire is being split into different modules to reduce bundle size. Because of this, to use the Database functionality you'll have to import AngularFireDatabase and add this to imports.

import { AngularFireDatabaseModule } from 'angularfire2/database';
@NgModule({
  ...
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],

Want to use Firebase in a variety of projects? Get Learn Ionic 3 From Scratch for HALF price!... or get Ionic 3 and AngularFire2 for FREE!.

Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More