How to Integrate Firebase into Angular 15

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

Related Posts:
Angular 15 Firebase CRUD example
Angular 15 Firestore CRUD example
Angular 15 Firebase Storage example


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:

integrate-firebase-angular-15-create-project

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

integrate-firebase-angular-15-create-project-step

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

If you turn on Google Analytics, you will see:

integrate-firebase-angular-15-create-project-configure

Click Create Project. The first step is done.

Step 2: Register App and get Firebase SDK

Now browser turns into following view:

integrate-firebase-angular-15-web-app

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

Click on Web App, you will see:

integrate-firebase-angular-15-register-app

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

integrate-firebase-angular-15-add-firebase-sdk

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.

integrate-firebase-angular-15-add-choose-feature

For each Feature, I will show you different step.

Firebase Realtime Database

Choose Realtime Database:

integrate-firebase-angular-15-realtime-database

Then click on Create Database:

integrate-firebase-angular-15-realtime-database-create

A modal will display for setting up database:

1- Choose the database location:

integrate-firebase-angular-15-realtime-database-location

2- Configure Security rules:

integrate-firebase-angular-15-realtime-database-config-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.

integrate-firebase-angular-15-firestore

Then click on Create Database:

integrate-firebase-angular-15-firestore-create

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:

integrate-firebase-angular-15-firestore-set-up-rules

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:

integrate-firebase-angular-15-firestore-set-up-location

Finally, click on Enable.

Firebase Cloud Storage

From list of Firebase features, choose Storage.

integrate-firebase-angular-15-firebase-storage

Then click on Get started:

integrate-firebase-angular-15-firebase-storage-create

A modal will display for setting up Storage:

1- Configure Secure Rules:

integrate-firebase-angular-15-firebase-storage-set-up-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:

integrate-firebase-angular-15-firebase-storage-set-up-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 { }

Further Reading

- Angular 15 with Firebase Realtime Database example
- Angular 15 with Firestore CRUD example
- Angular 15 with Firebase Storage example

Fullstack CRUD Application:
- Angular + Node Express + MySQL example
- Angular + Node Express + PostgreSQL example
- Angular + Node Express + MongoDB example
- Angular + Spring Boot + H2 example
- Angular + Spring Boot + MySQL example
- Angular + Spring Boot + PostgreSQL example
- Angular + Spring Boot + MongoDB example
- Angular + Django example
- Angular + Django + MySQL example
- Angular + Django + PostgreSQL example
- Angular + Django + MongoDB example