how can resolve this error ( No provider for InjectionToken angularfire2.app.options!) in angular test about firestore?

Question

in my angular test i have this problem in some componente and in the service where i use firestore. for example this is a error in my itemservice: NullInjectorError: R3InjectorError(DynamicTestModule)[ItemService -> AngularFirestore -> InjectionToken angularfire2.app.options -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for 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');
  }
}

and here is my 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 {}

Answer 1

You can try by replacing:

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

The method initializeApp() recieves only the firebase config since the change from angularfire2 to angularFire

As it is mentioned in the AngularFire Quickstart it is only passed the firebase configuration as it contains the app name.

Answer 2

I had the same message error, and this work for me:

import (in all test carpets that have use firebase):

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

and:

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

That, works for me