导入 AngularFirestore - NullInjectorError:没有提供 InjectionToken angularfire2.app.options

时间:2021-05-14 14:26:29

标签: angular firebase google-cloud-firestore angularfire

我正在尝试从 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.app.options 没有提供者! NullInjectorError: R3InjectorError(ChatRoomPageModule)[AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: NullInjectorError:没有 InjectionToken angularfire2.app.options 的提供者!`

下面是我的 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 中设置了提供者,但它不起作用。

0 个答案:

没有答案