CODEWITHSUNDEEP
angularunit-testingservicekarma-jasmine
Ev C
Ev C

Reputation: 97

NullInjectorError: R3InjectorError(DynamicTestModule)[ApiService -> HttpClient -> HttpClient]: NullInjectorError: No provider for HttpClient

I'm seeing a lot of people posting questions about the NullInjectorError: No provider for HttpClient! but I'm getting a more descriptive error in my Karma unit test. I've been learning Angular in parallel with Javascript/Typescript, HTML, and CSS/SCSS and so I'm a little shaky everywhere in terms of my foundation. How do I approach fixing this error? For those who say that it is because the OP forgot to import the testing module, I have imported the testing module. Here is what my test file looks like. I still get this error when I comment out everything in the html. Also, I tried to stub the ApiService.

Error:

NullInjectorError: R3InjectorError(DynamicTestModule)[ApiService -> HttpClient -> HttpClient]: 
  NullInjectorError: No provider for HttpClient!
error properties: Object({ ngTempTokenPath: null, ngTokenPath: [ 'ApiService', 'HttpClient', 'HttpClient' ] })
    at <Jasmine>
    at NullInjector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:915:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11082:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11082:1)
    at injectInjectorOnly (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:801:1)
    at ɵɵinject (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:805:1)
    at Object.ApiService_Factory [as factory] (ng:///ApiService/ɵfac.js:5:38)
    at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11249:1)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:11071:1)
    at NgModuleRef$1.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:24199:1)
    at Object.get (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:22102:1)

contents of news.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
// import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';

import { NewsComponent } from './news.component';
import { ApiService } from '../api.service';


describe('NewsComponent: show/hide button',() => {

    let component: NewsComponent;
    let fixture: ComponentFixture<NewsComponent>;

    const paragraphs = document.querySelectorAll("input");
    
    beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [ NewsComponent ],
          // here is my imported Http TestingModule
          imports: [ HttpClientTestingModule ],
          providers: [ 
            { provide: ApiService, useClass: FakeApiService }
           ]
        })
        .compileComponents();
      }));
    
      beforeAll(() => {
        fixture = TestBed.createComponent(NewsComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

});

class FakeApiService {

      fakeVal = 5;
      getNews() {
    }
}

Upvotes: 7

Views: 27812

Answers (1)

PriestOfHackers
PriestOfHackers

Reputation: 79

You can solve the problem by doing the following in steps your app.mdoule.ts

import { HttpClientModule, HttpClient } from '@angular/common/http'; 

 imports: [
    HttpClientModule
  ]

  providers: [HttpClient]

The first step is simply imports the relevant services/modules within your app so that you can do http calls , the second imports the httpClientModule within your current module and the last step ensure that you can actually use the HttpClient service

Upvotes: 7

Related Questions