Can't figure out what modules to import to make service work with Firestore in Angular

Question

I made a very basic service that looks like this:

@Injectable({
    providedIn: "root"
})
export class ItemService {
    private db!: CollectionReference<DocumentData>;

    constructor(private firestore: Firestore) {
        this.initDb();
    }

    private initDb() {
        if (this.firestore) {
            this.db = collection(this.firestore, "items");
        }
    }

    getItems(): Observable<Item[]> {
        if (this.db) {
            return collectionData(this.db).pipe(
                map((items: DocumentData[]) => {
                    return items.map((item: DocumentData) => item as Item);
                })
            );
        } else {
            return new Observable();
        }
    }
}

And this is how I want to use it:

export class HomeComponent implements OnInit {
    item$: Observable<Item[]> | null = null;
    db: CollectionReference<DocumentData> | undefined;

    constructor(private itemService: ItemService) {}

    ngOnInit(): void {
        this.item$ = this.itemService.getItems();
    }
}

So nothing out of the ordinary. The problem is that I got a error in the console. ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[ItemService -> ItemService -> Firestore -> Firestore]: NullInjectorError: No provider for Firestore!

So I included the ItemService in the providers array:

@NgModule({
    declarations: [HomeComponent, CarouselComponent],
    imports: [CommonModule, RouterModule.forChild(routes), FormsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatCardModule],
    providers: [ItemService],
    bootstrap: []
})
export class HomeModule {}

Then the console said: ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(HomeModule)[ItemService -> Firestore -> Firestore -> Firestore]: NullInjectorError: No provider for Firestore! NullInjectorError: R3InjectorError(HomeModule)[ItemService -> Firestore -> Firestore -> Firestore]

So I also included Firestore using this import: import { Firestore } from "@angular/fire/firestore";

Now the console says: Error: NG0204: Can't resolve all parameters for Firestore

And for the life of me I can't figure out how to correctly import things. I included the providers it asked in HomeModule since the app is lazily loaded, but I also tried doing it in AppModule and I got the same result.

Also this is how Firebase is handled in AppModule:

@NgModule({
    declarations: [AppComponent, NavigationComponent],
    imports: [BrowserModule, AppRoutingModule, MatIconModule, BrowserAnimationsModule,
        provideFirebaseApp(() => initializeApp(firebaseConfig)),
        provideFirestore(() => getFirestore())],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

I think it's also importanto to note that at first I wasn't using a service, but I was initializing everything and I was getting the items out of Firestore inside my component and everything was working fine. The problems started when I tried moving all that functionality in a separate service.

I'm using

"@angular/core": "^16.2.3",
"@angular/fire": "^7.6.1",

Answer 1

Look like I had to replace the imports with this: import { DocumentData, Firestore, collection, collectionData } from "@angular/fire/firestore";