如何在有关 Firestore 的角度测试中解决此错误（InjectionToken angularfire2.app.options 没有提供者！）？答案

【问题标题】：how can resolve this error ( No provider for InjectionToken angularfire2.app.options!) in angular test about firestore?如何在有关 Firestore 的角度测试中解决此错误（InjectionToken angularfire2.app.options 没有提供者！）？
【发布时间】：2020-12-27 15:56:42
【问题描述】：

在我的角度测试中，我在某些组件和使用 Firestore 的服务中遇到了这个问题。例如，这是我的 itemservice 中的错误： NullInjectorError：R3InjectorError（DynamicTestModule）[ItemService -> AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]： NullInjectorError：没有 InjectionToken angularfire2.app.options 的提供者！

import { Injectable } from '@angular/core';
import {
  AngularFirestore,
  AngularFirestoreCollection,
} from '@angular/fire/firestore';

import { Item } from '../../environments/item';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root',
})
export class ItemService {
  itemsCollection: AngularFirestoreCollection<Item> | undefined;
  items: Observable<Item[]>;
  idField: any;
  itemDoc: any;
  constructor(public afs: AngularFirestore) {
    this.items = this.afs
      .collection<Item>('items')
      .valueChanges({ idField: 'id' });
    this.itemsCollection = this.afs.collection<Item>('items');
  }
}

这是我的 app-module.ts


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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire';
import {
  AngularFirestore,
  AngularFirestoreModule,
} from '@angular/fire/firestore';
import { ItemsComponent } from './components/items/items.component';
import { ItemService } from './services/item.service';
import { ItemComponent } from './components/item/item.component';
import { RouterModule } from '@angular/router';
import { NavComponent } from './components/nav/nav.component';
import { CartComponent } from './components/cart/cart.component';
import { CartService } from './services/cart.service';

import { AddItemComponent } from './components/add-item/add-item.component';
import { AngularFireDatabaseModule } from '@angular/fire/database';
@NgModule({
  declarations: [
    AppComponent,
    ItemsComponent,
    ItemComponent,
    NavComponent,
    CartComponent,
    AddItemComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFirestoreModule,
    AngularFireDatabaseModule,
    AngularFireModule.initializeApp(environment.firebase, 'project2'),
    RouterModule.forRoot([
      { path: '', component: ItemsComponent },
      { path: 'details/:id', component: ItemComponent },
      { path: 'cart', component: CartComponent },
      { path: 'newitem', component: AddItemComponent },
    ]),
    FormsModule,
    ReactiveFormsModule,
  ],
  providers: [CartService, ItemService],
  bootstrap: [AppComponent],
})
export class AppModule {}

【问题讨论】：

标签： typescript testing google-cloud-firestore

【解决方案1】：

您可以尝试替换：

AngularFireModule.initializeApp(environment.firebase, 'project2'), 与 AngularFireModule.initializeApp(environment.firebase),

initializeApp() 方法从 angularfire2 更改为 angularFire 后仅接收 firebase 配置

正如AngularFire Quickstart 中提到的那样，它仅通过firebase 配置，因为它包含应用程序名称。

【讨论】：

感谢您的回答，但是当我进行测试时没有任何变化。
谢谢我遇到了同样的问题，这解决了我的问题

【解决方案2】：

我遇到了同样的消息错误，这对我有用：

导入（在所有使用 firebase 的测试地毯中）：

import { AngularFireModule } from '@angular/fire/compat';
import { AngularFirestoreModule } from '@angular/fire/compat/firestore';
import { environment } from 'src/environments/environment';

和：

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [
        AngularFireModule.initializeApp(environment.firebaseConfig),
        AngularFirestoreModule
      ],
      declarations: [ LoginComponent ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    })
    .compileComponents();
  });

这对我有用

【讨论】：