无法将 Angular/Fire 模块化 API 与 Angular 17 一起使用

Question

我正在尝试使用 Angular Fire 库的模块化 API，其中我们使用提供函数来注入我们需要的东西

导入报表

import { provideFirebaseApp, initializeApp, FirebaseApp, getApp } from '@angular/fire/app';
import { provideFirestore, getFirestore, Firestore } from '@angular/fire/firestore';
import { provideAuth, getAuth } from '@angular/fire/auth';
import { provideStorage, getStorage } from '@angular/fire/storage';

imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    provideFirebaseApp(() => initializeApp(firebaseConfig)),
    provideFirestore(() => getFirestore()),
    provideAuth(() => getAuth()),
    provideStorage(() => getStorage())
  ],

我遇到的错误是在编译期间

AppModule 的 NgModule.imports 中位置 4 的值不是引用 无法静态确定值。(-991010) app.module.ts(89, 5)：无法静态计算此表达式。 app.module.ts(89, 5)：“provideFirebaseApp”的值无法静态确定，因为它是外部声明。 类型“EnvironmentProviders”不可分配给类型“any[] |类型 | ModuleWithProviders<{}>'

Package.json 看起来像

 "dependencies": {
    "@angular/animations": "^17.3.11",
    "@angular/common": "^17.3.11",
    "@angular/compiler": "^17.3.11",
    "@angular/core": "^17.3.11",
    "@angular/fire": "^17.1.0",
    "@angular/forms": "^17.3.11",
    "@angular/localize": "^17.3.11",
    "@angular/platform-browser": "^17.3.11",
    "@angular/platform-browser-dynamic": "^17.3.11",
    "@angular/router": "^17.3.11",
    "bootstrap": "^5.3.3",
    "chart.js": "^2.9.3",
    "chartjs-plugin-waterfall": "^1.0.3",
    "firebase": "^10.10.0",
    "notiflix": "^3.2.6",
    "rxjs": "^7.8.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.14.7"
  },

我的 tsconfig.json 是

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "es2020",
    "moduleResolution": "node",
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2022",
    "lib": [
      "es2018",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Answer 1

您需要将 Firebase 服务注入您的提供商。

示例：

providers: [
    provideFirebaseApp(() => initializeApp({ ... })),
    provideFirestore(() => getFirestore()),
    ...
  ],