How to Set Up Firebase Database in Ionic 7 Angular

In this Ionic Firebase tutorial, we are going to look at step by step how to set up Firebase Realtime Database in Ionic Angular project.Firebase is a popularly known Google product and Its a NoSQL Realtime Database.

Working with Firebase is easy, It doesn’t make its user to lost in its dashboard due to its superb User Experience.

Firebase offers top-notch features for building web and mobile applications swiftly:

• Cloud storage
• Realtime update
• Easy A/B Testing
• Analytics Monitoring
• Authentication support
• Easy Server management
• Single-page app hosting
• Real-time communication
• Hosting and cloud storage
• Push notifications support
• Google Cloud IoT tools Integration support

Firebase offers two services:

Cloud Firestore: It’s a modern Real-time NoSQL database with auto-scaling and more robust queries.

Real-time Database: It allows us to build an app which needs to be updated at real-time. e.g., stock market app, sports app, live chat app etc.

In this tutorial we will focus on Firebase Real-time Database.

Create Firebase Account

Visit console.firebase.google.com and sign in using your Gmail account.

Click on the “create a project” button then click on continue button.

Next, click on the web icon as shown in the screenshot.

Next, add Firebase to your web app. Enter the app’s nickname and then click on the next button.

It will take you to the screen where you will see Firebase configuration, copy the red marked Firebase configuration keys keep it in the notepad or something else. You will need these keys to register in your Ionic/Angular project.

Next, we will click on the “database” from the left side navbar. Then, look for Realtime Database and click on the “create database” button.

It will open the security rules modal popover, select “start in test mode” option. Remember we are setting up these rules fro testing purpose. In real world app be careful about database rules.

Now, we are all set to use the Firebase Real-time Database.

Create Ionic/Angular Project

Run the following command to generate a new Ionic/Angular project.

ionic start ionic-firebase-setup --type=angular

Choose blank or which ever template you would like to choose from the Ionic’s template list.

? Starter template: 
  tabs         | A starting project with a simple tabbed interface 
  sidemenu     | A starting project with a side menu with navigation in the content area 
❯ blank        | A blank starter project 
  my-first-app | An example application that builds a camera with gallery 
  conference   | A kitchen-sink application that shows off all Ionic has to offer

Head over to the Ionic Firebase project folder.

cd ionic-firebase-setup

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Run the following command to install lab mode.

npm i @ionic/lab --legacy-peer-deps

Start the Ionic app.

ionic serve -l

Install Firebase Package in Ionic App

We need to install the Firebase library to set up Firebase in our Ionic app. Run the following command in the terminal.

npm install @angular/fire firebase@9.16.0 --legacy-peer-deps

Add Firebase Config Keys

In this step, we will register the Firebase config rules inside the environment.ts file, you can find these file in the src > environments folder.

Place the following code inside the environment.ts file.

export const environment = {
  production: false,
  firebaseConfig: {
    apiKey: "<your-api-key>",
    authDomain: "<your-auth-domain>",
    databaseURL: "<your-database-url>",
    projectId: "<your-cloud-firestore-project>",
    storageBucket: "<your-storage-bucket>",
    messagingSenderId: "<your-sender-id>",
    appId: "<your-app-id>",
    measurementId: "<your-measurement-id>"
  }
};

Import and Register Firebase in AppModule

Lastly, go to app.module.ts file. Here import and register Firebase services along with that also inject Firebase config keys with the AngularFireModule.initializeApp() method.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

// import firebase + enviornment
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({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireDatabaseModule,
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})

export class AppModule {}

Conclusion

That’s it for now, finally we have learned how to set up Firebase in an Ionic app. Now, you can connect your Ionic app with Firebase Realtime database and enjoy building it.