ctorError: No provider for HttpClient! in Angular 10

Question

I am getting HttpClient null injector error while running the test using Jasmine. I have mocked the service and still get the error. I am not sure why ?

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SpreadsheetComponent } from '../spreadsheet/spreadsheet.component';
import { SpreadsheetService } from '../../services/spreadsheet/spreadsheet.service';
import { Mock } from 'ts-mocks';
import { of } from 'rxjs';
import { FormsModule } from '@angular/forms';

fdescribe('SpreadsheetComponent', () => {
  let component: SpreadsheetComponent;
  let fixture: ComponentFixture<SpreadsheetComponent>;
  let mockSpreadSheetService;

  const xmlData =
    `
  <?xml version="1.0" encoding="UTF-16"?>
  <Reports>
  <Report>
      <Name>F 20.04</Name>
      <ReportVal>
    <ReportRow>10</ReportRow>
    <ReportCol>10</ReportCol>
      <Val>100</Val>
    </ReportVal>
    <ReportVal>
    <ReportRow>10</ReportRow>
    <ReportCol>11</ReportCol>
      <Val>200</Val>
    </ReportVal>
    <ReportVal>
    <ReportRow>10</ReportRow>
    <ReportCol>12</ReportCol>
      <Val>0</Val>
    </ReportVal>
    <ReportVal>
    <ReportRow>20</ReportRow>
    <ReportCol>10</ReportCol>
      <Val>600</Val>
    </ReportVal>
    <ReportVal>
    <ReportRow>20</ReportRow>
    <ReportCol>11</ReportCol>
      <Val>500</Val>
    </ReportVal>
    <ReportVal>
    <ReportRow>20</ReportRow>
    <ReportCol>12</ReportCol>
      <Val>600</Val>
    </ReportVal>
    </Report>
  </Reports>
  `
    ;




  beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [SpreadsheetComponent],
        providers: [{SpreadsheetService, useFactory: () =>   mockSpreadSheetService.Object}]
      })
      .compileComponents();
  }));

  beforeEach(() => {

    mockSpreadSheetService = new Mock<SpreadsheetService>({
      loadXML: () => of(xmlData)
    });

    fixture = TestBed.createComponent(SpreadsheetComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();

  });

  it('should create', () => {

   // fixture.detectChanges();
    expect(component).toBeTruthy();
  });
});

Does this answer your question? [No provider for HttpClient](https://stackoverflow.com/questions/47236963/no-provider-for-httpclient) — R. Richards, Sep 26 '20 at 21:10
I have the HttpClientModule in the imports array of app.module. Is my issue got to do with mocking. I have mocked the SpreadsheetService so technically it shouldnt check for http client is what i presume — Tom, Sep 26 '20 at 21:35

score 0 · Accepted Answer · answered Sep 27 '20 at 04:55

0

When you are testing a component, it does not matter what modules you have imported in your App module or the module containing your component under test unless you import the component's parent module in the TestBed.

For this particular case, it seems you have not imported HttpClientTestingModule in your TestBed. You may import it and use the HttpTestingController to mock HTTP calls.

answered Sep 27 '20 at 04:55

Kunal Karmakar

573
7
12

Thanks this worked, I had added to spec file of the service as I thought it is only needed here as service uses http but didnt know i had to add it to the component too. Finding it bit strange though as the component is not making any direct http calls – Tom Sep 27 '20 at 06:27

ctorError: No provider for HttpClient! in Angular 10

1 Answers1