During my Angular test, I encountered an issue with a component and a service that utilizes Firestore. Here is the error message from 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');
}
}
Here is the content of my app-module.ts file:
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 {}