Applications need to communicate with a server over the HTTP protocol to access back-end services. Angular provides a client HTTP API for Angular applications through the HttpClient
service class in @angular/common/http.
Reproducing the Issue
*.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class UsersLoaderService {
constructor(private http: HttpClient) {}
getData() {
return this.http.get<IUser[]>(url);
}
...
}
Output
Internal server error: R3InjectorError(Standalone[_AppComponent])[_MultiobservableService -> _MultiobservableService -> _HttpClient -> _HttpClient]:
NullInjectorError: No provider for _HttpClient!
...
Solution
The NullInjectorError: No provider for _HttpClient! error
typically indicates that the HttpClientModule
or provideHttpClient
has not been imported into your application’s module or config file.
Solution for older Angular versions
Import HttpClientModule
and add HttpClientModule
to imports
. Adding HttpClientModule
to the imports
array of the AppModule makes the HttpClient
service available throughout the application.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import HttpClientModule from @angular/common/http here
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
// other components
],
imports: [
BrowserModule,
HttpClientModule, // Add HttpClientModule here
// other modules
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Solution for Angular 17 and above
Import provideHttpClient
and add provideHttpClient
to providers
. Adding provideHttpClient
to the providers
array of the config module makes the HttpClient
service available throughout the application.
app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration } from '@angular/platform-browser';
// Import provideHttpClient from @angular/common/http here
import { provideHttpClient } from '@angular/common/http';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes),
provideClientHydration(),
provideHttpClient(), // add provideHttpClient here
],
};
Conclusion
Now, Angular knows about the HTTP client module, which provides the HttpClient service for making HTTP requests.