web-dev-qa-db-ja.com

NullInjectorError：InjectionTokenのプロバイダーがありませんangularfire2.app.options

Cloud Firestoreデータベースにフォームデータを挿入しようとしています。以下は、x.component.tsファイルです。ここで、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);
  }

}

私が得るエラーは以下の通りです。

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 { }
angularfirebasegoogle-cloud-firestoreangular7
3
Virus

私の問題を解決した答えを知っていると思います。作成したサービスに以下のステートメントをインポートするだけで、サービスのコンストラクターにオブジェクトを作成する必要があります。

'@ angular/fire/firestore'から{AngularFirestore}をインポートします。

1
Virus

このエラーは、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を削除してください。

うまくいけば、それが役立ちます！

1
Alexander Staroselsky