NullInjectorError: Нет поставщика для InjectionToken angularfire2.app.options

Question

Я пытаюсь вставить данные формы в облачную базу данных Firestore.Ниже приведен мой файл x.component.ts, в котором я получаю сообщение об ошибке в конструкторе, в котором я пишу частный пожарный магазин: 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);
  }

}

Я получаю следующую ошибку:.

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)

Я перешел по ссылкам ниже, но не повезло.

https://github.com/angular/angularfire2/issues/1706

https://github.com/angular/angularfire2/issues/1417

Нет поставщика дляInjectionToken angularfire2.app.options

Ниже приведен файл app.module.ts.

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

Мне кажется, я знаю ответ, который решил мою проблему.Мне просто нужно было импортировать приведенный ниже оператор в созданный мной сервис, и мне нужно создать объект в конструкторе сервиса.

import {AngularFirestore} из '@ angular / fire / firestore';

Answer 2

Ошибка, скорее всего, связана с попыткой добавить AngularFirestore к providers вашего AppModule.AngularFirestore становится доступным для ввода, когда AngularFirestoreModule импортируется в модуль.Удалить AngularFirestore из 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 { }

Также обратите внимание на обновленные пути импорта.Эти пути взяты непосредственно из документации по установке .

Также убедитесь, что у вас есть только @angular/fire в ваших зависимостях, а не @angular/fire и angularfire2.С учетом вышесказанного, в ссылках указывайте только @angular/fire и удаляйте angularfire2 из ваших package.json и любых импортных данных.

Надеюсь, это поможет!