No provider for HttpClient in Angular: 5 Solutions 2025

"No provider for HttpClient" — an error that annoys everyone

You're writing a service in Angular, injecting HttpClient into the constructor, running the application... And then — bam! The browser console turns red: NullInjectorError: No provider for HttpClient. Sound familiar?

This error is a true "rite of passage" for every Angular developer. It has been discussed over 400,000 times on Stack Overflow, and in 2025 it continues to catch both beginners and experienced developers. But the good news: there is a solution, and more than one.

In this article, we'll cover 5 best practices to defeat No provider for HttpClient in Angular 18+ and TypeScript. Let's go!

Why does "No provider for HttpClient" even occur?

The essence of the error is simple: Angular doesn't know how to create an instance of HttpClient. Angular uses dependency injection (DI) — a container that manages object creation. If you request HttpClient, but the DI container doesn't have a recipe for building it — an error is thrown.

Classic situation:

import { Injectable } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\n\n@Injectable({ providedIn: 'root' })\nexport class DataService {\n  constructor(private http: HttpClient) {} // ❌ Error: No provider for HttpClient\n}\n

Angular says: "I see you want HttpClient, but I don't know where to get it." And this is logical — we forgot to import the module or provider that registers HttpClient in the DI container.

Best Practices 2025: 5 Ways to Fix the Error

1. Classic: HttpClientModule (Angular up to 18)

The oldest and most proven way is to import HttpClientModule into the root module of the application.

// app.module.ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { HttpClientModule } from '@angular/common/http';\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    HttpClientModule // ✅ Here it is, the savior\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n

This method works in Angular 2–17. In 2025 it is still relevant if you are using NgModule-based architecture. Downside: it adds the entire HttpClient module, even if you only need basic functionality.

2. Modern Standard: provideHttpClient() (Angular 15+)

With the release of standalone components, Angular switched to functional providers. Now instead of a module, you use the provideHttpClient function.

// main.ts (standalone bootstrap)\nimport { bootstrapApplication } from '@angular/platform-browser';\nimport { provideHttpClient } from '@angular/common/http';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideHttpClient() // ✅ Register HttpClient\n  ]\n}).catch(err => console.error(err));\n

This is the recommended way in Angular 18+ and 2025. It is lighter, faster, and doesn't drag in unnecessary code. If you are writing a new application — use this one.

3. Advanced: provideHttpClient() with withFetch()

Starting from Angular 17, it became possible to use the fetch API instead of XMLHttpRequest. This provides a performance boost and support for modern features (e.g., streaming).

import { bootstrapApplication } from '@angular/platform-browser';\nimport { provideHttpClient, withFetch } from '@angular/common/http';\nimport { AppComponent } from './app/app.component';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideHttpClient(\n