Angular 7. NullInjectorError: No provider for HttpClient! Even when app.module has HttpClientModule. How to fix it?

Question

I am using Angular 7, and I am trying to use a service that uses HttpClient to call an API link from my APIController in my .Net Core MVC application. Whenever I tried to test in the cmd window after typing in ng test, it gives me an error, and it's only for the service I'm trying to fix:

ProductService should be created
Error: StaticInjectorError(DynamicTestModule)[HttpClient]: 
  StaticInjectorError(Platform: core)[HttpClient]: 
    NullInjectorError: No provider for HttpClient!

Here's how I wrote the code in the following files below:

product.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { Product } from '../product';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  productsUrl = "api/ProductsAPI";

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(this.productsUrl)
      .pipe(
        catchError(this.handleError<Product[]>('getProducts'))
      );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      //// TODO: better job of transforming error for user consumption
      //this.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }
}

The product.service file has HttpClient in it, and I read that it doesn't work unless HttpClientModule is in the import section of app.module file, and the product.service class is in the providers section.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ProductsComponent } from './products/products.component';

import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { ProductService } from './products/product.service';

@NgModule({
  declarations: [
    AppComponent,
    ProductsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    AppRoutingModule
  ],
  providers: [ProductService],
  bootstrap: [AppComponent]
})
export class AppModule { }

It still gives me a 'No provider for HttpClientModule' error. I want to use the product.service, and import it into another component.

Does anyone have any suggestions or answers on how to remedy this problem?

can you please copy paste the output of 'ng --version' and share you're code of your spec file? everything works find if you launch ng serve or ng build? — jcuypers
I have a same error like this when using import HttpClientModule in my module so I change to HttpClient and everything work fine. Can you try that — user4851087

J. Zacka J. Zacka · Accepted Answer · 2019-04-13T02:01:45

I have a way to remove the nullInjetorError problem. I thought that I have to put the HttpClientModule class in the import section of the app.module.ts file for the product.service file, but it turns out that I have to import it into the import section of the spec file, product.service.spec.ts.

product.service.spec.ts

describe('ProductService', () => {
  beforeEach(() => TestBed.configureTestingModule({
    declarations: [ProductsComponent],
    imports: [HttpClientModule]
  })
  );

And when that problem still persists in the product.component, I added the HttpClientModule class into the import section of product.component.spec.ts file,m and it fixed the problem.

product.component.spec.ts

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ProductsComponent],
      imports: [HttpClientModule]
    })
    .compileComponents();
  }));

I didn't need to add the HttpClientModule class into the import section of app.module.ts, I just needed to add it to the import section of the spec files, and that resolved my problem with the 'NullInjectorError: No provider for HttpClient.' problem.

I hope this can help for those who encounter the same problem.

Angular 7. NullInjectorError: No provider for HttpClient! Even when app.module has HttpClientModule. How to fix it?

2 Answers