Question

我正在尝试将表单数据插入Cloud Firestore数据库中。以下是我的x.component.ts文件，在该文件中，我在构造私有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

No provider for 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

我想我知道解决我问题的答案。我只需要将以下语句导入我创建的服务，并需要在服务的构造函数中创建对象。

从'@ angular / fire / firestore'导入{AngularFirestore};

Answer 2

错误很可能来自尝试将AngularFirestore添加到providers的{{1}}中。将AppModule导入模块后，即可注入AngularFirestore。从AngularFirestoreModule中删除AngularFirestore：

providers

也请注意更新的导入路径。这些路径直接来自installation documentation。

还要确保您的依赖项中仅包含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。

希望有帮助！

Answer 3

解决方案是解决import AngularFirestore from。

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

代替：

import { AngularFirestore } from 'angularfire2/firestore';

NullInjectorError：没有用于InjectionToken angularfire2.app.options的提供程序

3 个答案: