NullInjectorError: No provider for InjectionToken angularfire2.app.options

问题

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 { }

回答1:

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';

回答2:

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!

回答3:

So the solution is to import AngularFirestore from.

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

Instead of:

import { AngularFirestore } from 'angularfire2/firestore';

来源：https://stackoverflow.com/questions/55241779/nullinjectorerror-no-provider-for-injectiontoken-angularfire2-app-options