I am facing an issue with my AngularFire setup. I have recently installed the latest version of AngularFire using npm i @angular/fire and have successfully configured Firestore. However, when attempting to load data into my Firestore database, I encounter the error message "Property 'collection' does not exist on type 'FirestoreModule'."
//AppModule.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { environment } from 'src/environments/environments.prod';
import { AngularFireModule } from '@angular/fire/compat';
import { FirestoreModule } from '@angular/fire/firestore';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './layouts/header/header.component';
import { FooterComponent } from './layouts/footer/footer.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { CategoriesComponent } from './categories/categories.component';
@NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
DashboardComponent,
CategoriesComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
AngularFireModule.initializeApp(environment.firebaseConfig),
FirestoreModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
//Component
import { Component } from '@angular/core';
import { FirestoreModule } from '@angular/fire/firestore';
@Component({
selector: 'app-categories',
templateUrl: './categories.component.html',
styleUrls: ['./categories.component.scss'],
})
export class CategoriesComponent {
constructor(private afs: FirestoreModule) {}
onSubmit(formData: any) {
const categoryData = {
category: formData.value.category,
};
this.afs.collection('category').add(categoryData);
}
}