How to Integrate Firebase into Angular 17

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

Related Posts:
– Angular 17 Firebase CRUD example
– Angular 17 Firestore CRUD example
– Angular 17 Firebase Storage example

Overview

For integrating Firebase into Angular 17, 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 17
• firebase 10
• @angular/fire 17
• 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 < 1705683600000", // 2024-1-20 ".write": "now < 1705683600000", // 2024-1-20 } } 

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- Setup Firestore location:

2- 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 = '2'; service cloud.firestore { match /databases/{database}/documents { match /{document=**} { allow read, write: if request.time < timestamp.date(2024, 1, 20); } } } 

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 = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.time < timestamp.date(2024, 1, 20); } } } 

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 { } 

Further Reading

• Angular Template Syntax
• Angular Router Guide
• https://www.npmjs.com/package/@angular/fire
• Firebase Web Get Started

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

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