How to Setup Firebase Account, AngularFire2 in Angular 13

Today we are going to learn how to create Firebase account and set up the AngularFire2 library in Angular project.

Let us understand what is Angular Fire

AngularFire2 is an official library for Angular and Firebase. Firebase is a real-time NoSQL database.

AngularFire2 allows you to swiftly develop high-quality web and mobile apps to grow your business.

Firebase (AngularFire) is a Google product, and it provides lots of powerful features. Check out below some of them:

• Observable Support: It supports RxJS, Firebase, and Angular.
• Real-time database: Real-time data synchronization.
• Firebase Authentication: Observe the application’s authentication State.
• Offline Data: Manage offline data automatically with AngularFirestore.
• Server-side Render: Produce static HTML to enhance performance.
• Support ngrx: It supports ngrx with AngularFire’s action based APIs.
• Binary Data Support: Upload, delete and download binary files such as images, videos, and other blobs.
• Push Notification: Supports push notifications.
• Call server code: Supports serverless Cloud Functions.

The most crucial factor is that it adds only, which is required. Almost every AngularFire package is less than 3kb. It becomes 2kb when gzipped.

01. AngularFirebase2 Tutorial: Firebase Account Set up

Visit Firebase website and login using your email id.Add Project section.

Click on the below screen.

Enter the project name, don’t forget to accept the terms and condition.

Click on the project to enter in the Firebase admin dashboard.

Click on the icon like given below.

Then you’ll see the screen, here you have to add the Firebase to your web app.

Then click on register app and it will add the Firebase to your app.

To get the firebaseConfig, click on the Gear icon > Project setting. In Your apps section you’ll find the Firebase SDK snippet section. Here you’ll have to select Config option to get the firebaseConfig.

Create Database

Firebase provides Real-time Database and Cloud Firestore, we will be using Real-time Database in this tutorial.

Click on create database button.

For the demo purpose we will be using Start in test mode security rules option and click on enable button.

Then, click on the Cloud Firestore button and choose Realtime Database option.

Select Realtime Database from the options like given below.

Go to Database > Rules. Paste these security rules in your Realtime Database’s Rules tab.

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

Note: Change these rules when you are building a real app.

03. AngularFirebase2 Tutorial: Install Angular 13 Project

Enter the following command in your terminal to install Angular project.

ng new angular-firebase

Answer following questions asked by Angular CLI.

Would you like to add Angular routing?
Select y and Hit Enter.

Which stylesheet format would you like to use? (Use arrow keys)
Choose CSS and hit Enter

Enter inside the project.

cd new angular-firebase

If you are using visual studio code then use the following command to open the project.

code .

02. AngularFirebase2 Tutorial: Install and Set up Firebase Database in Angular Project.

To install the AngularFirebase 2 library in Angular project, you need to run the below command in your terminal.

npm install firebase @angular/fire --save

To make connection between your Firebase database and Angular app.

Go to src > environments folder and add your Firebase config details in both the environment files.

environment.prod.ts

export const environment = {
  production: true,
  firebase: {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  }
};

environment.ts

export const environment = {
  production: false,
  firebase: {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  }
};

It’s time to import Firebase services in app.module.ts file.

// Firebase services + environment module
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';
import { AngularFireStorageModule } from '@angular/fire/compat/storage';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
import { environment } from '../environments/environment';


@NgModule({
  imports: [
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule,
  ]
})

So far, we have created the account in Firebase real-time NoSQL database.

Along with that, we have also set up the AngularFire2 library in Angular project.

Now you can use the powerful features of AngularFire2, and you can create your web and mobile app project.