如何在最新的 Angular 中使用 Firebase 9

Question

我正在寻找有关如何在全新的 Angular 应用程序中初始化 firebase 9 的资源。我遵循了beta firebase instructions，但是当涉及到initializeApp 步骤时，我不知道如何将其包含到我的app.module.ts 中。

通常，您会使用 npm install @angular/fire，但在安装时，我收到一个错误，基本上显示 @angular/fire 需要 firebase 7-8。 9已经安装，所以不会安装angular fire。

我不确定从@firebase 包中导入什么，这将允许我使用我的环境详细信息initializeApp。

任何帮助都会很棒，谢谢！

编辑：Package.json

{
"name": "PROmpt",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},
"private": true,
"dependencies": {
  "@angular/common": "~11.2.0",
  "@angular/core": "~11.2.0",
  "@angular/forms": "~11.2.0",
  "@angular/platform-browser": "~11.2.0",
  "@angular/platform-browser-dynamic": "~11.2.0",
  "@angular/router": "~11.2.0",
  "@capacitor/core": "2.4.7",
  "@ionic/angular": "^5.5.2",
  "firebase": "^9.0.0-beta.1",
  "rxjs": "~6.6.0",
  "tslib": "^2.0.0",
  "zone.js": "~0.10.2"
},
"devDependencies": {
  "@angular-devkit/build-angular": "~0.1102.4",
  "@angular-eslint/builder": "2.0.2",
  "@angular-eslint/eslint-plugin": "2.0.2",
  "@angular-eslint/eslint-plugin-template": "2.0.2",
  "@angular-eslint/template-parser": "2.0.2",
  "@angular/cli": "~11.2.4",
  "@angular/compiler": "~11.2.0",
  "@angular/compiler-cli": "~11.2.0",
  "@angular/language-service": "~11.2.0",
  "@capacitor/cli": "2.4.7",
  "@ionic/angular-toolkit": "^3.1.1",
  "@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.6.0",
  "jasmine-spec-reporter": "~5.0.0",
  "karma": "~5.2.0",
  "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.0.2"
},
"description": "An Ionic project"
}

Answer 1

看看https://github.com/angular/angularfire/blob/master/samples/modular/src/app/app.module.ts

我对我的使用做了一些调整。

   ...
    import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
    import { environment } from '../environments/environment';

    import { getDatabase, provideDatabase } from '@angular/fire/database';
    import { getFirestore, provideFirestore, enableMultiTabIndexedDbPersistence } from '@angular/fire/firestore';
    import { getStorage, provideStorage } from '@angular/fire/storage';
    import { getAuth, provideAuth } from '@angular/fire/auth';
    import { FunctionsModule, getFunctions, provideFunctions } from '@angular/fire/functions';

    // import { getMessaging, provideMessaging } from '@angular/fire/messaging';
    // import { getRemoteConfig, provideRemoteConfig } from '@angular/fire/remote-config';
    // import { getAnalytics, provideAnalytics, ScreenTrackingService, UserTrackingService } from '@angular/fire/analytics';
    // import { ServiceWorkerModule } from '@angular/service-worker';

    let resolvePersistenceEnabled: (enabled: boolean) => void;

    export const persistenceEnabled = new Promise<boolean>(resolve => {
      resolvePersistenceEnabled = resolve;
    });

    ...
    @NgModule({
      ...
      imports: [
        ...
        provideFirebaseApp(() => initializeApp(environment.firebase)),

        provideDatabase(() => {
          const database = getDatabase();
          return database;
        }),

        provideFirestore(() => {
          const firestore = getFirestore();
          enableMultiTabIndexedDbPersistence(firestore).then(
            () => resolvePersistenceEnabled(true),
            () => resolvePersistenceEnabled(false)
          );
          return firestore;
        }),

        provideStorage(() => {
          const storage = getStorage();
          return storage;
        }),

        provideAuth(() => {
          const auth = getAuth();
          return auth;
        }),

        FunctionsModule,
        provideFunctions(() => {
          const functions = getFunctions();
          return functions;
        }),

        // provideMessaging(() => getMessaging()),
        // provideRemoteConfig(() => getRemoteConfig()),
        // provideAnalytics(() => getAnalytics()),
        // ServiceWorkerModule.register('ngsw-worker.js', {
        //   enabled: environment.production,
        //   registrationStrategy: 'registerWhenStable:30000'
        // }),

        ...
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    ...

希望对你有帮助；）

已编辑：我在这里找到了一个更好的例子https://dev.to/jdgamble555/angular-12-with-firebase-9-49a0

Answer 2

基于文档here Firebase 尚不受支持。正如我所读的，Firebase 9 将支持模块化导入，我认为 angular/fire 尚不支持。
所以，没有办法让它们一起工作。

另外，请查看link 谈论 firebase v9