在 Angular 11.0.5 中使用 AngularFire2答案

【问题标题】：Using AngularFire2 with Angular 11.0.5在 Angular 11.0.5 中使用 AngularFire2
【发布时间】：2020-12-19 10:06:17
【问题描述】：

我正在尝试使用 Firebase 作为我的 Angular 应用程序的数据库。

根据this instruction（在官方开发者Github页面上），首先我在我的项目上安装了npm install angularfire2 firebase --save。

然后我像这样将 firebase 添加到环境中：

export const environment = {
  production: false,
  firebase: {
    apiKey: "AIzaSyAsxljRPGVlI8qhEAWX4SpnGP-ozNH-USQ",
    authDomain: "ng-ft-fd861.firebaseapp.com",
    projectId: "ng-ft-fd861",
    storageBucket: "ng-ft-fd861.appspot.com",
    messagingSenderId: "185324334847",
    appId: "1:185324334847:web:c8252e76b35e457458e6ca",
    measurementId: "G-RBHLRX57NN"
  }
};

之后，我尝试将AngularFireModule 和AngularFirestoreModule 导入到app.module.ts 文件中，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WoodComponent } from './wood/wood.component';

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';
import { environment } from '../environments/environment';

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

然后，我像这样编辑了 app.component.ts：

import { Component } from '@angular/core';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'fire';
  items: Observable<any[]>;
  constructor(db: AngularFirestore) {
    this.items = db.collection('items').valueChanges();
  }
}

我希望它应该可以工作。它不会在 CLI 控制台中显示任何错误：

Click to see the image

但在浏览器中，出现此错误，并且应用程序根本无法运行。

Click to see the image

我的 Angular 版本是：

Click to see the image

有什么帮助吗？

PS：如果您能先显示这些图像，我将不胜感激。我的声望不够！！

【问题讨论】：

比让别人展示你的图片更好的是，将这些图片中的文本作为文本包含在你的问题中，然后使用 Stack Overflow 的格式选项将它们标记出来。

标签： angular typescript firebase angularfire2

【解决方案1】：

根据这个说明（在官方开发者 Github 页面上）

这是项目的一个分支（在链接的第一部分中说明）。始终确保您在原始项目中：https://github.com/angular/angularfire

如上所示，使用 ng add @angular/fire 初始化您的项目。

我建议您删除之前添加的所有与 firebase 相关的内容并运行此命令。它不仅会添加 firebase 依赖项，还会指导您使用 firebase 更新项目。

【讨论】：