No provider for InjectionToken angularfire2.app.options Angular 6

Hey guys.

My code works fine with angularfire2 firestore.

But my spec file fails in test.

As soon as i add
constructor(private afs: AngularFirestore) { }

in my components constructor my tests fail
No provider for InjectionToken angularfire2.app.options

import { AngularFirestore } from 'angularfire2/firestore';

 TestBed.configureTestingModule({
      declarations: [MyComponent],
      providers: [AngularFirestore]

This is my app.module

import { AngularFireModule } from 'angularfire2';
import { AngularFirestoreModule } from 'angularfire2/firestore';

import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [

    // firebase  modules  
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule
  ],
  providers: [],
})
export class AppModule { }

PLease help.

Here is a link to my repository

https://github.com/acc2link/Angular6

[ksaifullah]

Hi @acc2link ,

The service AngularFirestore relies on initialization of AngularFireModule and import of AngularFirestoreModule which you have done for your actual code.

For the test, you don't have that setup. Which is correct in the sense that ideally you shouldn't call out to actual firestore database from your test. So the solution is you need to stub the service.

Example:

Create a stub:

const FirestoreStub = {
    collection: (name: string) => ({
      doc: (_id: string) => ({
        valueChanges: () => new BehaviorSubject({ foo: 'bar' }),
        set: (_d: any) => new Promise((resolve, _reject) => resolve()),
      }),
    }),
  };

Add whatever the methods you are using, this example doesn't have all available methods stubbed

Then provide that stub:

TestBed.configureTestingModule({
      providers: [
        { provide: AngularFirestore, useValue: FirestoreStub },
      ],
    });

Don't forget to add your other dependencies (if any)

@ksaifullah Khalid. Thank you sir.

[hiepxanh]

is that work? can you close this issue?

[viralsv2010]

Hello,

I have the same issue but it is not in the test file. It is in my dev environment and below is the code of the x.component.ts file.

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)

[jitendraP-ashutec]

Hello, @viralsv2010 have you got any solution for this issue?