angular - NullInjectorError : No provider for InjectionToken angularfire2. 应用程序选项

Question

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

我得到的错误如下。

错误错误:StaticInjectorError(AppModule)[AngularFirestore -> InjectionToken angularfire2.app.options]:StaticInjectorError(平台:core)[AngularFirestore -> InjectionToken angularfire2.app.options]:NullInjectorError:没有 InjectionToken angularfire2 的提供程序.app.选项!在 NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8895) 在resolveToken (core.js:9140) 在 tryResolveToken (core.js:9084) 在 StaticInjector .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) 在resolveNgModuleDep (core.js:21217) 在_createClass (core.js:21270) 在_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 { }

Answer 1

我不知道在哪个版本的 AngularFire 中这发生了变化，但是如果您通过 ng add @angular/fire 添加 AngularFire Auth ，当您尝试导入 AngularFireAuth 时，您也会遇到此错误在组件中。

这可以通过导入 FIREBASE_OPTIONS 来修复来自@angular/fire/compat并将以下内容添加到 providers您的 module.ts 部分:

{ provide: FIREBASE_OPTIONS, useValue: environment.firebase }

感谢Saumya对于此修复。