Erreur "No provider for HttpClient" Angular : 5 solutions 2025

« No provider for HttpClient » — l'erreur qui énerve tout le monde

Vous écrivez un service Angular, vous injectez HttpClient dans le constructeur, vous lancez l'application… Et là, c'est le drame ! La console du navigateur se remplit de rouge : NullInjectorError: No provider for HttpClient. Ça vous dit quelque chose ?

Cette erreur est un véritable « rite de passage » pour tout développeur Angular. Sur Stack Overflow, elle a été discutée plus de 400 000 fois, et en 2025, elle continue de piéger les débutants comme les experts. Mais bonne nouvelle : il existe une solution, et même plusieurs.

Dans cet article, nous allons voir 5 bonnes pratiques pour vaincre No provider for HttpClient dans Angular 18+ et TypeScript. C'est parti !

Pourquoi l'erreur « No provider for HttpClient » apparaît-elle ?

Le principe est simple : Angular ne sait pas comment créer une instance de HttpClient. Angular utilise un conteneur d'injection de dépendances (DI) qui gère la création des objets. Si vous demandez HttpClient mais que le conteneur DI n'a pas la recette pour le construire, l'erreur se déclenche.

Le cas classique :

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

Angular vous dit : « Je vois que tu veux HttpClient, mais je ne sais pas où le trouver ». Et c'est logique — nous avons oublié d'importer le module ou le provider qui enregistre HttpClient dans le conteneur DI.

Bonnes pratiques 2025 : 5 façons de corriger l'erreur

1. La méthode classique : HttpClientModule (Angular jusqu'à 18)

La méthode la plus ancienne et la plus éprouvée consiste à importer HttpClientModule dans le module racine de l'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 // ✅ Le sauveur\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n

Cette méthode fonctionne avec Angular 2 à 17. En 2025, elle est toujours pertinente si vous utilisez une architecture basée sur NgModule. Inconvénient : elle importe tout le module HttpClient, même si vous n'avez besoin que des fonctionnalités de base.

2. Le standard moderne : provideHttpClient() (Angular 15+)

Avec l'arrivée des composants standalone, Angular est passé aux providers fonctionnels. Désormais, au lieu d'un module, vous utilisez la fonction provideHttpClient.

// main.ts (bootstrap standalone)\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() // ✅ On enregistre HttpClient\n  ]\n}).catch(err => console.error(err));\n

C'est la méthode recommandée dans Angular 18+ et en 2025. Elle est plus légère, plus rapide et n'importe pas de code superflu. Si vous créez une nouvelle application, utilisez celle-ci.

3. La version avancée : provideHttpClient() avec withFetch()

Depuis Angular 17, il est possible d'utiliser l'API fetch à la place de XMLHttpRequest. Cela offre un gain de performances et la prise en charge de fonctionnalités modernes (comme le 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