I am trying to use angular 12 and firebase latest modular sdk for my ionic app. I am using realtime database and having hard time finding the changes i need to do on the data handling part.

below is my new app.module.ts

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/compat/database';


imports: [

   AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,

]

The data service file looks like below

import { AngularFireDatabase } from '@angular/fire/compat/database';
  

constructor(public db: AngularFireDatabase) { }

getVendor(){
    return new Promise((resolve, reject) =>
    {
      this.db.object("config").valueChanges().subscribe(
        (res) => {
                    //console.log(res); 
                    resolve(res)},
        (err) => { 
                    console.log("hitting error:" + err); reject(err)
                }
      )
  })
  }

However, on running i see the below error

[error] - ERROR {"name":"NullInjectorError","ngTempTokenPath":null,"ngTokenPath":["CoreService","SBDataService","AngularFireDatabase","InjectionToken angularfire2.app.options","InjectionToken angularfire2.app.options","InjectionToken angularfire2.app.options"]}

my package.json is

{
  "name": "xxx",
  "scripts": {
    ...
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/fire": "^7.2.0",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "firebase": "^9.5.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@capacitor/cli": "3.3.2",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "An Ionic project"
}