问题描述
我正在尝试将表单数据插入到 Cloud Firestore 数据库中.下面是我的 x.component.ts 文件，我在其中编写的构造函数出错
私有firestore:AngularFireStore从@angular/core"导入 { Component, OnInit };从 '../shared/group.service' 导入 { GroupService };从'@angular/forms' 导入 { NgForm };//import { NullTemplateVisitor } from '@angular/compiler';从@angular/fire/firestore"导入 { AngularFirestore }；//import { AngularFireModule } from 'angularfire2';//import { AngularFirestoreModule } from 'angularfire2/firestore';@成分({选择器:'应用程序组'，templateUrl: './group.component.html',styleUrls: ['./group.component.css']})导出类 GroupComponent 实现 OnInit {构造函数(私有 groupService:GroupService，私有 Firestore:AngularFirestore){}ngOnInit() {this.resetForm();}重置表格(表格?:NgForm){如果(形式！= null)form.resetForm();this.groupService.formData = {$key:空，名: ''，姓: ''，年龄:无}}onSubmit(表单:NgForm){让数据 = form.value;//this.firestore.collection('groups').add(data);this.resetForm(form);}}我得到的错误如下.
错误错误:StaticInjectorError(AppModule)[AngularFirestore ->InjectionToken angularfire2.app.options]:StaticInjectorError(平台:核心)[AngularFirestore ->InjectionToken angularfire2.app.options]: NullInjectorError: InjectionToken angularfire2.app.options 没有提供者！在 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)
我已经点击了下面的链接，但没有成功.
没有 InjectionToken angularfire2.app.options 的提供者>
下面是我的 app.module.ts 文件.
import { BrowserModule } from '@angular/platform-browser';从'@angular/core' 导入 { NgModule };从 './app.component' 导入 { AppComponent };从'../environments/environment'导入{环境}从'angularfire2'导入{AngularFireModule}；从 'angularfire2/database' 导入 { AngularFireDatabaseModule };从@angular/fire/firestore"导入 { AngularFirestoreModule, AngularFirestore };从 './groups/groups.component' 导入 { GroupsComponent };从 './groups/group/group.component' 导入 { GroupComponent };从 './groups/group-list/group-list.component' 导入 { GroupListComponent }从'./groups/shared/group.service'导入{GroupService}；从@angular/forms"导入 { FormsModule }@NgModule({声明: [应用组件，组组件，组组件，组列表组件],进口:[浏览器模块，AngularFirestore 模块，AngularFireDatabase 模块，AngularFireModule.initializeApp(environment.firebaseConfig),表单模块],提供者:[AngularFirestore，GroupService]，引导程序:[AppComponent]})导出类 AppModule { }我想我知道解决我问题的答案.我只需要将下面的语句导入到我创建的服务中，并且需要在服务的构造函数中创建对象.
import { AngularFirestore } from '@angular/fire/firestore';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.
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 { }
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';
这篇关于NullInjectorError: InjectionToken angularfire2.app.options 没有提供者的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！