NullInjectorError: No provider for HttpClient in Angular

This is one of the most common dependency injection errors in Angular. This error happens especially for beginners working with APIs.

An error means that it cannot find the HttpClient service in its dependency injection system.

What is NullInjectorError?

A NullInjectorError occurs when Angular tries to inject a service, but no provider is registered for it.

Typical Error Message

ERROR NullInjectorError: No provider for HttpClient!
OR
ERROR Error: NG0201: No provider for HttpClient!

Why Does This Error Occur?

There are many reasons to get this error

1. You forgot to import HttpClientModule in your code.

2. You are using standalone components without providing HttpClient, etc.

How to Fix NullInjectorError: No provider for HttpClient

Solution 1: Import HttpClientModule (Most Common Fix)

in app.module.ts

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

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule
  ]
})
export class AppModule {}

Solution 2: If You Are Using Standalone Components (Angular 15+)

in main.ts file

import { provideHttpClient } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [provideHttpClient()]
});

Real-World Problem

You are using HttpClient without import the HttpClient Module

@Injectable()
export class UserService {
  constructor(private http: HttpClient) {}
}

Error

NullInjectorError: No provider for HttpClient

Fix the Problem

Import HttpClientModule in your code.

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