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

private firestore: AngularFireStore

    import { Component, OnInit } from '@angular/core';
    import { GroupService } from '../shared/group.service';
    import { NgForm } from '@angular/forms';
    // import { NullTemplateVisitor } from '@angular/compiler';
    import { AngularFirestore } from '@angular/fire/firestore';
    // import { AngularFireModule } from 'angularfire2';
    // import { AngularFirestoreModule } from 'angularfire2/firestore';
    
    @Component({
      selector: 'app-group',
      templateUrl: './group.component.html',
      styleUrls: ['./group.component.css']
    })
    export class GroupComponent implements OnInit {
    
      constructor(private groupService: GroupService, private firestore: AngularFirestore) { }
    
      ngOnInit() {
        this.resetForm();
      }
    
      resetForm(form ?: NgForm){
        if(form!= null)
          form.resetForm();
        this.groupService.formData = {
          $key : null,
          firstname: '',
          lastname: '',
          age: null
        }
      }
    
      onSubmit(form : NgForm){
        let data = form.value;
        // this.firestore.collection('groups').add(data);
        this.resetForm(form);
      }
    
    }

The error I get is as below.

ERROR Error: StaticInjectorError(AppModule)[AngularFirestore -> InjectionToken angularfire2.app.options]: StaticInjectorError(Platform: core)[AngularFirestore -> InjectionToken angularfire2.app.options]: NullInjectorError: No provider for InjectionToken angularfire2.app.options! at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895) at resolveToken (core.js:9140) at tryResolveToken (core.js:9084) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981) at resolveToken (core.js:9140) at tryResolveToken (core.js:9084) at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8981) at resolveNgModuleDep (core.js:21217) at _createClass (core.js:21270) at _createProviderInstance (core.js:21234)

I had followed the links below but no luck.

Angular Fire Issue 1706

Angular Fire Issue 1416

No provider for InjectionToken angularfire2.app.options

Below is my app.module.ts file.

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    import { environment } from '../environments/environment'
    import { AngularFireModule } from 'angularfire2';
    import { AngularFireDatabaseModule } from 'angularfire2/database';
    import { AngularFirestoreModule, AngularFirestore } from '@angular/fire/firestore';
    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'
    
    
    @NgModule({
      declarations: [
        AppComponent,
        GroupsComponent,
        GroupComponent,
        GroupListComponent
      ],
      imports: [
        BrowserModule,
        AngularFirestoreModule,
        AngularFireDatabaseModule,
        AngularFireModule.initializeApp(environment.firebaseConfig),
        FormsModule
      ],
      providers: [AngularFirestore, GroupService],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Answer 1

I don't know in which version of AngularFire this changed, but if you add AngularFire Auth via ng add @angular/fire, you'll also encounter this error as soon as you try to import AngularFireAuth in a component.

This can be fixed by importing FIREBASE_OPTIONS from @angular/fire/compat and adding the following to the providers section in your module.ts:

{ provide: FIREBASE_OPTIONS, useValue: environment.firebase }

For example your firebase.config.ts

export const firebaseProviders = [
    provideFirebaseApp(() => initializeApp(environment.firebaseConfig)),
    provideAuth(() => getAuth()),
    { provide: FIREBASE_OPTIONS, useValue: environment.firebaseConfig }
];

and your main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { firebaseProviders } from './app/firebase.config';
import { provideRouter, withHashLocation } from '@angular/router';
import { routes } from './app/app.routes';

appConfig.providers = [
  ...(appConfig.providers || []), // Ensure existing providers are included
  ...firebaseProviders,
  provideRouter(routes, withHashLocation())
];

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Thanks to Saumya for this fix.

Answer 2

So the solution is to import AngularFirestore from

import { AngularFirestore } from '@angular/fire/firestore';

Instead of
import { AngularFirestore } from 'angularfire2/firestore';

hope it helps someone

Answer 3

I think I know the answer which solved my problem. I just had to import the below statement to the service I created and need to create object in constructor of service.

import { AngularFirestore } from '@angular/fire/firestore';

Answer 4

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!