将 AngularFire2 与 Angular 11.0.5 一起使用

Question

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

根据此说明（在官方开发人员 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 控制台中显示任何错误：

点击查看图片

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

点击查看图片

---

我的 Angular 版本是：

点击查看图片

任何帮助？

PS：如果你能把这些图片显示出来，我会很感激的。 我的声望不够！！

Answer 1

根据此说明（在官方开发人员 Github 页面上）

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

如那里所示，使用以下命令初始化您的项目： ng add @angular/fire 。

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