Programming

How to integrate Firebase with Angular Applications?

A guide to integrating Firestore database with Angular applications

Photo by Caspar Camille Rubin on Unsplash

In this short article, we will walk through the process of setting up a Remote Firebase Database i.e. Firestore with an Angular Application.

I will divide this guide into 2 sections as follows:

1. Creating a project on Firebase
2. Integrating Firebase with Angular Application

Section 1: Creating a project on Firebase

First, go to Firebase Console

Then, select “Add Project” and give a name to the project.

Once the project is created on Firebase, select “Web” from the options to add Firebase to your Angular Application as shown in the below screenshot, give a nickname for your app, and then click “Register app”.

Section 2: Integrating Firebase with Angular Application

Now, go to your Angular app, open the terminal, and run the following command to install Firebase SDK.

npm install firebase

After installing the SDK, copy the Firebase configuration details (as shown on the console) and paste them into the environment.ts file, as shown below:

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxxx",
    authDomain: "angular-demo-1234a.firebaseapp.com",
    projectId: "angular-demo-1234a",
    storageBucket: "angular-demo-1234a.appspot.com",
    messagingSenderId: "xxxxxxxxxx",
    appId: "1:xxxxxxxxxx:web:dexxxxxxyyyxxx"
  }
};

The next step is to install AngularFire using the following command:

ng add @angular/fire

If you receive an Authentication error that asks you to enter an authorization code, then follow the steps given in this post to receive the authorization code.

After running the ng add @angular/fire command, select the features you would like to add to your application. Eg. ng deploy --hosting, Authentication, Firestore, Realtime Database.

Select the account associated with your Firebase application and the project created on Firebase.

The associated configuration and code changes will be automatically made in the Angular application code.

Now, go to app.module.ts and import the following:

import { FIREBASE_OPTIONS } from '@angular/fire/compat';

and make the following changes in the providers:

providers: [
  {provide: FIREBASE_OPTIONS, useValue: environment.firebase}
]

Now, your application is ready to use the Firestore database with Angular Applications.

Connect with me

LinkedIn: https://www.linkedin.com/in/jimit105/
GitHub: https://github.com/jimit105
Twitter: https://twitter.com/jimit105