How to Integrate Firebase into Angular 15

In this tutorial, I will show you step by step to integrate Firebase into Angular 15.

Newer version: How to Integrate Firebase into Angular 16

Contents

Overview
Technology
Step 1: Add Firebase Project
Step 2: Register App and get Firebase SDK
Step 3: Choose and Setup Firebase Feature
Step 4: Setup Angular project with Firebase
Further Reading

Overview

For integrating Firebase into Angular 15, you need to follow these steps:

Step 1: Add Firebase Project
Step 2: Register App and get Firebase SDK
Step 3: Choose Firebase Feature and setup rules, location
Step 4: Setup Angular project with Firebase

Technology

Angular 15
firebase 9
@angular/fire 7
rxjs 7

Step 1: Add Firebase Project

Go to Firebase Console, login with your Google Account, then click on Add Project.

You will see the window like this:

Enter Project name, set Project Id and click on Continue.

Turn off/on Enable Google Analytics for this project, then click Create Project / Continue.

If you turn on Google Analytics, you will see:

Click Create Project. The first step is done.

Step 2: Register App and get Firebase SDK

Now browser turns into following view:

If you don’t see it, just choose Project Overview.

Click on Web App, you will see:

Set the nickname and choose Register App for turning into next step.

You need to save the information above for later usage. Then click on Continue to Console.

Step 3: Choose and Setup Firebase Feature

Click on See all Build Features, you can see a list of Firebase features.

For each Feature, I will show you different step.

Firebase Realtime Database

Choose Realtime Database:

Then click on Create Database:

A modal will display for setting up database:

1- Choose the database location:

2- Configure Security rules:

In this tutorial, we don’t implement Authentication, so let’s choose test mode. Then click on Enable.

If you come from another situation, just open Tab Rules, then change .read and .write values to true.
Or:

{
  "rules": {
    ".read": "now < 1674752400000",  // 2023-1-27
    ".write": "now < 1674752400000",  // 2023-1-27
  }
}

Firebase Cloud Firestore

From list of Firebase features, Choose Cloud Firestore.

Then click on Create Database:

A modal will display for setting up Firestore:

1- Configure Security rules:
In this tutorial, we don't implement Authentication, so let's choose test mode:

If you come from another situation, just open Tab Rules, then change allow read, write value to if true.
Or:

rules_version = '1';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if
      	request.time < timestamp.date(2023,4,30);
    }
  }
}

2- Choose the Firestore location:

Finally, click on Enable.

Firebase Cloud Storage

From list of Firebase features, choose Storage.

Then click on Get started:

A modal will display for setting up Storage:

1- Configure Secure Rules:

In this tutorial, we don't implement Authentication, so let's choose test mode.

Or if you come from another situation, just open Tab Rules, then change allow read, write value to if true.
Or:

rules_version = '1';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if
          request.time < timestamp.date(2023, 1, 27);
    }
  }
}

2- Choose the database location:

Finally, click on Done.

Step 4: Setup Angular project with Firebase

Run the command: npm install firebase @angular/fire.

Open src/environments/environment.ts, add Firebase configuration that we have saved when Popup window was shown above:

export const environment = {
  production: false,
  firebase: {
    apiKey: 'xxx',
    authDomain: 'bezkoder-firebase.firebaseapp.com',
    databaseURL: 'https://bezkoder-firebase.firebaseio.com',
    projectId: 'bezkoder-firebase',
    storageBucket: 'bezkoder-firebase.appspot.com',
    messagingSenderId: 'xxx',
    appId: 'xxx'
  }
};

Open app.module.ts, import environment, AngularFireModule and:

AngularFireDatabaseModule for Firebase Realtime Database
AngularFirestoreModule for Firebase Cloud Firestore
AngularFireStorageModule for Firebase Storage

import { NgModule } from '@angular/core';
...
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { environment } from '../environments/environment';

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