How to install Firebase in Angular

If you are reading this, you probably already know about Firebase and would like to use it in your Angular projects. In this beginner’s tutorial, I will provide you with a step-by-step guide on how to install Firebase in Angular.

First of all, you will need a Firebase project, so if you do not have one already, head over to firebase.google.com and create one. Sign in with your Google account and click on the Create a project button.

Give your project a name, accept the terms and click the continue button.

Enable Google Analytics for your Firebase project and click on the continue button.

Click on the continue button to confirm that your Firebase project is ready.

Now that you have a Firebase project, go to the General tab in the project settings, scroll to the bottom of the page and add a web app.

Give your app a name and click on the Register app button.

At this point, you can exit from the screen and create a new Angular project. In my case, I’m creating a new Angular project named icode4coffee by running the following command.

ng new icode4coffee

The Angular CLI will guide you through setting up your new Angular project. Next, install firebase using npm.

npm install firebase

Now that you have a Firebase installation, go back to the General tab of your Firebase project settings and browse to the configuration settings of your web app. Use the provided configuration settings to set up your Angular src/environments/environment.prod.ts and src/environments/environment.ts files.

export const environment = {
  production: false,
  firebase: {
    apiKey: [Your API key goes here],
    authDomain: [Your app domain goes here],
    projectId: [Your project Id goes here],
    storageBucket: [Your storage bucket goes here],
    messagingSenderId: [Your message sender Id goes here],
    appId: [Your app Id goes here],
    measurementId: [Your measurement Id goes here]
  }
};

Now let’s install the Angular Firebase library by running the following command.

npm i @angular/fire

The dependency version in the package.json at the time of writing this article is

"dependencies": {
    "@angular/animations": "~12.0.1",
    "@angular/common": "~12.0.1",
    "@angular/compiler": "~12.0.1",
    "@angular/core": "~12.0.1",
    "@angular/fire": "~6.1.5",
    "@angular/forms": "~12.0.1",
    "@angular/platform-browser": "~12.0.1",
    "@angular/platform-browser-dynamic": "~12.0.1",
    "@angular/router": "~12.0.1",
    "firebase": "^8.7.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },

It is now time to create a database that we can use. Click on the Firestore Database menu in the navigation panel on the left and click on the Create database button.

Choose between production or test mode and click on the Next button.

Set your location and click the Enable button.

Import and initialize the AngularFireModel into your app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { environment } from 'src/environments/environment';

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

The last step is to generate a service that we can use to test if we can write to our newly created database. So let’s create a service we can use to create a job object with a name, reference, and description.

ng generate service /services/job

We only want to test if we can write to the database, so for the purpose of this tutorial, we will just hardcode the object.

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class JobService {

  constructor(
    private _store: AngularFirestore
  ) { }

  create() {
    this._store.collection('jobs').add({
      reference: '12345',
      name: 'The Job',
      description: 'This is a job'
    }).then(() => {
    });
  }
}

Now inject the job service into the app.component.ts file and call the create method.

import { JobService } from './services/job.service';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'icode4coffee';

  constructor(
    private _jobService: JobService
  ) {
    this._jobService.create();
  }
}

Run the Angular application.

npm run start

You should see the newly created document if you open the database from your firebase console.

Now that you have successfully installed Firebase in Angular, you might also be interested to learn how to install and use Tailwind CSS in Angular.

If you feel in any way that this post was helpful, please consider buying me a coffee to help me create more blog posts, videos, and tutorials.

If you want to keep up to date with my latest posts, check out the list of posts on the home page and make sure that you follow icode4coffee on Facebook, Twitter and LinkedIn.