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

Posted 2023-02-22

【中文标题】NullInjectorError：InjectionToken angularfire2.app.options 没有提供程序

【英文标题】：NullInjectorError: No provider for InjectionToken angularfire2.app.options

【发布时间】：2019-08-10 00:38:01

【问题描述】：

我正在尝试将表单数据插入云 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)

我点击了下面的链接，但没有运气。

Angular Fire Issue 1706

Angular Fire Issue 1416

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  

【问题讨论】：

请分享您要导入 Firebase 模块（包括 firestore）的 NgModule。

@AlexanderStaroselsky 上传文件

如果我必须做出有根据的猜测，您肯定需要从模块中的提供程序中删除 AngularFirestore。它不应该在那里添加。导入 AngularFirestoreModule 后，它就可以在整个应用程序中使用。从提供者那里删除它，如果有帮助，请告诉我。

如果我从提供程序中删除它，也会出现同样的错误。

【参考方案1】：

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

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

【参考方案2】：

错误很可能来自尝试将AngularFirestore 添加到providers 的AppModule。当AngularFirestoreModule 被导入到模块中时，AngularFirestore 变得可以注入。从providers 中删除AngularFirestore：

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  

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

还要确保您的依赖项中只有@angular/fire，而不是@angular/fire 和 angularfire2。话虽如此，仅在您的导入中引用 @angular/fire 并从您的 package.json 和任何导入中删除 angularfire2。

希望对您有所帮助！

【讨论】：

AngularFireDatabaseModule 的导入不正确。您能否尝试将该模块的导入更改为import AngularFireDatabaseModule from '@angular/fire/database';。如果没有该更改，我会收到一个错误，该错误甚至会阻止应用程序启动。请查看更新后的问题和更新后的 firebase 模块导入。

@Virus 您能否确认一下您的package.json 中的@angular/fire 版本？您还可以确认您的package.json 中没有@angular/fire 和angularfire2，您只有@angular/fire。

【参考方案3】：

所以解决办法是从

导入AngularFirestore

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

而不是import AngularFirestore from 'angularfire2/firestore';

希望对某人有所帮助