Firebase Angular – Getting Started

Firebase Angular combination is a boon for indie developers. It makes building up an application so fast, that the Time-To-Market can happen within a couple of days.

Angular is one of the best frameworks available for building up enterprise applications, and Firebase provides Backend-as-a-Service covering the entire spectrum.

Let’s get Started

Creating a Firebase project

Headover to https://console.firebase.google.com/ and click on ‘Add Project’.

1. Give your project a name, for example: ‘Angular Firebase’ and hit ‘Continue’ (Firebase would generate a project identifier automatically using the project name)
2. Enable/Disable Google Analytics for the project. Hit ‘Conitnue’
3. If you have enabled Google Analytics in the previous step, you can set the account to sync the Analytics with.
4. Create Project

Wait for a few seconds, and the new Firebase project should be ready. Click ‘Continue’ to land on the newly created Firebase project dashboard.

To be able to integrate any application with Firebase, we need some settings. For this, we need to register the application we are going to create. From the dashboard, add an App.
As we are working with Angular as the front end, we can choose to add a Web App.

You can enable Firebase Hosting to be able to deploy the appliaction to Firebase.
Click ‘Register app’

This will display a firebaseConfig which we can store for later, to be used in the Angular project

Creating an Angular project

Open a terminal window and enter the following command (for prerequisites click here):

ng new angular-firebase

This should create a folder named ‘angular-firebase’ and initialize an Angular project.
Now we can install the firebase library as well as the @angular/fire library which is a specific wrapper of firebase for the Angular ecosystem.

npm install --save firebase @angular/fire

Now with the libraries available at disposal, we can setup the project with firebaseConfig we received from the Firebase Console.

To import, open up AppModule (app.module.ts) and add the following:

import { provideFirebaseApp, getApp, initializeApp } from '@angular/fire/app';
import { getFirestore, provideFirestore } from '@angular/fire/firestore';

const firebaseConfig = {
  ...
  // values obtained from Firebase Console
}

@NgModule({
  imports: [
    // provide the firebaseConfig for app initialization with firebase
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    // Setup firestore database
    provideFirestore(() => getFirestore()),
  ],
  ...
})
export class AppModule { }

With Firebase setup complete, we can start with application implementation.

For more information on how to work with Firebase, please check out @angular/fire documentation.