No provider for HttpClient in Angular: 5 Lösungen 2025

„No provider for HttpClient“ – der Fehler, der alle nervt

Sie schreiben einen Service in Angular, injizieren HttpClient in den Konstruktor, starten die Anwendung... Und dann – zack! Die Browser-Konsole färbt sich rot: NullInjectorError: No provider for HttpClient. Kommt Ihnen bekannt vor?

Dieser Fehler ist eine Art „Ritual der Einweihung“ für jeden Angular-Entwickler. Auf Stack Overflow wurde er über 400.000 Mal diskutiert, und auch 2025 trifft er sowohl Neulinge als auch Erfahrene. Die gute Nachricht: Es gibt eine Lösung – und zwar mehrere.

In diesem Artikel zeigen wir Ihnen 5 Best Practices, um No provider for HttpClient in Angular 18+ und TypeScript zu besiegen. Los geht's!

Warum tritt „No provider for HttpClient“ überhaupt auf?

Der Kern des Fehlers ist einfach: Angular weiß nicht, wie es eine Instanz von HttpClient erzeugen soll. Angular verwendet Dependency Injection (DI) – einen Container, der die Objekterstellung verwaltet. Wenn Sie HttpClient anfordern, der DI-Container aber kein „Rezept“ für dessen Erstellung hat, erhalten Sie den Fehler.

Ein klassisches Beispiel:

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

Angular sagt: „Ich sehe, du willst HttpClient, aber ich weiß nicht, wo ich ihn herbekomme.“ Das ist auch logisch – wir haben vergessen, das Modul oder den Provider zu importieren, das/der HttpClient im DI-Container registriert.

Best Practices 2025: 5 Wege, den Fehler zu beheben

1. Der Klassiker: HttpClientModule (Angular bis Version 18)

Die älteste und bewährteste Methode – importieren Sie HttpClientModule in Ihr Root-Modul.

// 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 // ✅ Der Retter in der Not\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n

Diese Methode funktioniert in Angular 2–17. Auch 2025 ist sie noch relevant, wenn Sie eine NgModule-basierte Architektur verwenden. Nachteil: Es wird das gesamte HttpClient-Modul geladen, auch wenn Sie nur die Basisfunktionalität benötigen.

2. Der moderne Standard: provideHttpClient() (Angular 15+)

Mit der Einführung von Standalone Components ist Angular auf funktionale Provider umgestiegen. Statt eines Moduls verwenden Sie jetzt die Funktion provideHttpClient.

// 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() // ✅ HttpClient registrieren\n  ]\n}).catch(err => console.error(err));\n

Dies ist die empfohlene Methode in Angular 18+ und für 2025. Sie ist leichter, schneller und zieht keinen überflüssigen Code mit. Wenn Sie eine neue Anwendung schreiben – verwenden Sie genau diese Methode.

3. Fortgeschritten: provideHttpClient() mit withFetch()

Seit Angular 17 gibt es die Möglichkeit, die Fetch API anstelle von XMLHttpRequest zu verwenden. Das bringt Leistungssteigerungen und Unterstützung für moderne Features (z. B. 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