Angularfire: No provider for InjectionToken angularfire2.app.options Angular 6

Created on 4 Jun 2018 · 5Comments · Source: angular/angularfire

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

Source

acc2link

Most helpful comment

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 on 4 Jun 2018

👍20 🎉5 ❤2 👎1

All 5 comments

Hi @acc2link ,

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

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 on 4 Jun 2018

👍20 🎉5 ❤2 👎1

@ksaifullah Khalid. Thank you sir.

acc2link on 4 Jun 2018

is that work? can you close this issue?

hiepxanh on 19 Jun 2018

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)