ionic Angularfire 使用 v9 和实时数据库升级 NullInjectorError

Question

我正在尝试为我的离子应用程序使用 Angular 12 和 Firebase 最新的模块化 SDK。我正在使用实时数据库，很难找到我需要在数据处理部分进行的更改。

下面是我的新 app.module.ts

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


imports: [

   AngularFireModule.initializeApp(firebaseConfig),
    AngularFireDatabaseModule,

]

数据服务文件如下所示

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

但是，在运行时我看到以下错误

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

我的 package.json 是

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