angular - 导入 AngularFirestore - NullInjectorError：InjectionToken angularfire2.app.options 没有提供者

Question

我正在尝试从 firebase firestore 获取数据。我想使用 {AngularFirestore}。我得到如下错误。

NullInjectorError：R3InjectorError（ChatRoomPageModule）[AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]：NullInjectorError：没有 InjectionToken angularfire2 的提供者。应用程序选项！NullInjectorError：R3InjectorError（ChatRoomPageModule）[AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]：NullInjectorError：没有 InjectionToken angularfire2 的提供者。应用程序选项！`

下面是我的chatroom.page.ts。

import { Component, OnInit } from '@angular/core';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFirestore } from '@angular/fire/firestore';
import * as firebase from 'firebase';
import { Router} from '@angular/router';
import { AlertController } from '@ionic/angular';
import { AngularFireDatabase } from 'angularfire2/database';
    
@Component({
  selector: 'app-chat-room',
  templateUrl: './chat-room.page.html',
  styleUrls: ['./chat-room.page.scss'],
})
export class ChatRoomPage implements OnInit {
  text: string;
  me: string;
  you: string;
  chatRef: any;
  userid: string;
  size: number; 
  index: number; 
  user1: string; 
  user2: string;
  number: number;
  tmpid: string;
  tmpYou: string;
  currentU: string;
  chatnum: number; 
      
  constructor(
    public atrCtrl:AlertController,
    public router: Router,
    public db:AngularFireDatabase,
    public fs:AngularFirestore
  ) { 
    this.chatRef = fs.collection('chats', ref => ref.orderBy('Timestamp')).valueChanges();
  }

下面是我的 app.module.ts。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
    
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
    
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2'; 
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireStorageModule } from 'angularfire2/storage';
import{FIREBASE_CONFIG} from './environment'
    
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFirestore } from '@angular/fire/firestore';
    
@NgModule({
  declarations: [
    AppComponent
  ],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    AngularFireAuthModule,
    AngularFireStorageModule,
    AngularFireModule.initializeApp(FIREBASE_CONFIG),
    AngularFireDatabaseModule,
    AngularFirestoreModule
  ],
  providers: [
    AngularFirestore,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

下面是我的 chatroompage.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ChatRoomPageRoutingModule } from './chat-room-routing.module';
import { ChatRoomPage } from './chat-room.page';
    
import {AngularFirestore} from '@angular/fire/firestore';
    
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ChatRoomPageRoutingModule
  ],
  declarations: [ChatRoomPage],
  providers:[AngularFirestore]
})
export class ChatRoomPageModule {}

我该如何解决这个错误？我导入了 AngularFirestore，并在 app.module 中设置了提供程序，但它不起作用。

标签： angularfirebasegoogle-cloud-firestoreangularfire