我在哪里初始化 Ionic4 + Angular 项目中的 Firebase JS SDK？

Question

我有一个简单的问题：我在哪里初始化 Ionic4 + Angular 项目中的 firebase SDK？

它在 app.module.ts 文件中吗？或者在 app.component.ts 文件中？我试图在 app.module.ts 中初始化它但没有成功（使用下面的代码）：

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';

import { environment } from 'src/environments/environment';
import firebase from 'firebase/compat/app'; //I get an error here

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    firebase.initializeApp(environment.firebase)
  ],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

但我收到一条错误消息（与 firebase.initializeApp(environment.firebase 一致）：

Type 'App' is not assignable to type 'any[] | Type<any> | ModuleWithProviders<{}>'.
Type 'App' is missing the following properties from type 'Type<any>': apply, call, bind, prototype, and 4 more.

Answer 1

要在 Angular 项目中使用 Firebase，您必须使用 angular/fire，这是 Angular 和 Firebase 开发的官方支持包。

最基本的配置可以在他们的快速入门指南中找到here并且在您的应用模块中看起来像这样

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire/compat';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

我在哪里初始化 Ionic4 + Angular 项目中的 Firebase JS SDK？

Where do I initialize Firebase JS SDK inside Ionic4 + Angular project?

angular

firebase

ionic-framework

ionic4