NullInjectorError:没有用于InjectionToken angularfire2.app.options的提供程序 [英] NullInjectorError: No provider for InjectionToken angularfire2.app.options

问题描述

我正在尝试将表单数据插入Cloud Firestore数据库中.下面是我的x.component.ts文件，在其中我正在编写的构造函数中出现错误

 私有firestore:AngularFireStore从'@ angular/core'导入{Component，OnInit};从"../shared/group.service"导入{GroupService}；从"@ angular/forms"导入{NgForm}；//从'@ angular/compiler'导入{NullTemplateVisitor};从"@ angular/fire/firestore"导入{AngularFirestore}；//从'angularfire2'导入{AngularFireModule};//从"angularfire2/firestore"导入{AngularFirestoreModule};@零件({选择器:"app-group"，templateUrl:"./group.component.html"，styleUrls:['./group.component.css']})导出类GroupComponent实现OnInit {构造函数(私有groupService:GroupService，私有firestore:AngularFirestore){}ngOnInit(){this.resetForm();}resetForm(form?:NgForm){if(form！= null)form.resetForm();this.groupService.formData = {$ key:null，名: ''，姓: ''，年龄:空}}onSubmit(form: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)在resolveToken(core.js:9140)在tryResolveToken(core.js:9084)在.push ../node_modules/@angular/core/fesm5/core.js.StaticInjector.get(core.js:8981)在resolveToken(core.js:9140)在tryResolveToken(core.js:9084)在StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get(core.js:8981)在_createClass(core.js:21270)在resolveNgModuleDep(core.js:21217)在_createProviderInstance(core.js:21270):21234)

我遵循了以下链接，但没有运气.

Angular Fire Issue 1706

Angular Fire Issue 1416

没有提供InjectionToken angularfire2.app.options的提供程序

下面是我的app.module.ts文件.

 从'@ angular/platform-b​​rowser'导入{BrowserModule};从'@ 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({声明:[AppComponent，GroupsComponent，GroupComponent，GroupListComponent]，进口:[BrowserModule，AngularFirestoreModule，AngularFireDatabaseModule，AngularFireModule.initializeApp(environment.firebaseConfig)，表格模块]，提供者:[AngularFirestore，GroupService]，引导程序:[AppComponent]})导出类AppModule {} 

解决方案

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

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

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

解决方案

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的提供程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！