NullInjectorError: No provider for InjectionToken angularfire2.app.options

Question

I\'m trying to insert the form data in cloud Firestore database. Below is my x.component.ts file in which I\'m getting error at constructor where I\'m writing

Answer 1

The error is most likely coming from attempting to add AngularFirestore to providers of your AppModule. AngularFirestore becomes available to inject when AngularFirestoreModule is imported into the module. Remove AngularFirestore from providers:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { environment } from '../environments/environment'
import { GroupsComponent } from './groups/groups.component';
import { GroupComponent } from './groups/group/group.component';
import { GroupListComponent } from './groups/group-list/group-list.component'
import { GroupService } from './groups/shared/group.service';
import { FormsModule } from '@angular/forms';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireDatabaseModule } from '@angular/fire/database';

@NgModule({
  declarations: [
    AppComponent,
    GroupsComponent,
    GroupComponent,
    GroupListComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule,
    FormsModule
  ],
  providers: [GroupService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Please also note the updated import paths. These paths come directly from the installation documentation.

Also make sure you only have @angular/fire in your dependencies and not both @angular/fire and angularfire2. With that being said, only reference @angular/fire in your imports and remove angularfire2 from your package.json and any imports.

Hopefully that helps!