How to add Firebase in PWA or Angular project using AngularFire.

How to add Firebase in PWA or Angular project using AngularFire.

Setting up Firebase configuration in PWA/Ionic/Angular project using AngularFire.

AngularFire is the official library that connects Angular to Firebase.
AngularFire includes modules for the Realtime Database, Firebase Authentication, Cloud Firestore, and Cloud Storage.


If you already have your project it's good. If not, please follow the link.
Click here👆 to create your new PWA/Angular project.


Before start..

We need to create and setup a Firebase project.
Click here👆 for Steps to setup Firebase – Create New Database in Firebase Firestore by web.

Okay, I assume you have followed each step from above link↑ to setup a Firebase Project.

# Next to install the dependencies, to do this in your project root directory run this command: (Installing Firebase and AngularFire from npm)

sudo npm install firebase @angular/fire --save

( put sudo to execute this command as administrator - for Mac/Linux users and for Windows users→ search Command Prompt → right click and then click ‘Run as administrator’ |sudo is not required for Windows users )

Run: [ npm install firebase @angular/fire --save ] in your terminal/command-prompt

# Next we need to setup the firebase configuration in our Angular environment files. To add firebase configuration details open-up your environment file:

(for local👇)
YOUR-PROJECT-DIRECTORY/src/environments/environment.ts
(for production👇)
YOUR-PROJECT-DIRECTORY/src/environments/environment.prod.ts

Add parameter of firebase configuration in environment:

export const environment = {
  production: false,
  firebase: {
    apiKey: 'YOUR_API_KEY',
    authDomain: 'YOUR_AUTH_DOMAIN',
    databaseURL: 'YOUR_DATABASE_URL',
    projectId: 'YOUR_PROJECT_ID',
    storageBucket: 'YOUR_STORAGE_BUCKET',
    messagingSenderId: 'YOUR_SENDER_ID'
  }
};
Add configuration in environment.ts and environment.prod.ts file for test/production environment.

You can find your firebase configuration in the Firebase Console by opening OverviewSelect Your ProjectProject OverviewClick over 'Add app'Click over WebThen Add details to get your configurations.

Finish the setup by importing the corresponding AngularFire modules in our app.module.ts file:

import { AngularFireModule } from '@angular/fire';
import { AngularFirestore } from '@angular/fire/firestore';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireMessagingModule } from '@angular/fire/messaging';
import { AngularFireStorageModule, StorageBucket } from '@angular/fire/storage';

...
imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFireMessagingModule,
    AngularFireStorageModule,
    ...
  ],
  providers: [
    ...
    AngularFirestore,
    { provide: [StorageBucket] },
    ...
  ],
...

Next, you may face an error while using Firestore Database.
Error: "The Cloud Firestore API is not available for Cloud Datastore projects."
To avoid this error: You must "Enable and Create Firestore Database".
To do so check this video👇👇

You can find your Firebase Project Database at Firebase Console.


Done! 🤩 It’s that simple to add and configure Firebase.

See you later👋👋


Next, you may cover:

  1. How to do CRUD operations in Firebase with Firestore. (Click here👆)
  2. Add Firebase Authentication to PWA or Angular project using AngularFire. (Click here👆)
  3. Deploy project to Firebase Hosting. (Click here👆)

Feel free to comment down in the comment box… If I missed anything or anything is incorrect or anything does not works for you :)
Stay connected for more articles.