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

【问题标题】：Where do I initialize Firebase JS SDK inside Ionic4 + Angular project?我在哪里初始化 Ionic4 + Angular 项目中的 Firebase JS SDK？
【发布时间】：2021-11-06 04:29:51
【问题描述】：

我有一个简单的问题：我在哪里初始化 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.

【问题讨论】：

标签： angular firebase ionic-framework ionic4

【解决方案1】：

要将 Firebase 与 Angular 项目一起使用，您必须使用 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 {}

【讨论】：