Fix Angular NullInjectorError: No provider for HttpClient

Quick Fix (30 seconds) – Add HttpClientModule to your root module

This is the most common fix. The culprit here is almost always a missing import in AppModule (or app.config.ts in newer Angular). Open your src/app/app.module.ts file and check if HttpClientModule is imported and listed in the imports array.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule  // <-- this line is required
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

If you're on Angular 15+ and using standalone components, skip this – go to the moderate fix below. For everyone else, save the file, restart the dev server (ng serve), and check if the error is gone.

Moderate Fix (5 minutes) – Standalone components or feature modules

If the quick fix didn't work, you're probably using standalone components or a feature module. Here's what to check.

For Standalone Components (Angular 14+)

You need to add provideHttpClient() in your app.config.ts (or main.ts if you're wiring it there). Open your src/app/app.config.ts file:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient()  // <-- this is what you're missing
  ]
};

If you're using the old main.ts bootstrap approach instead of app.config.ts, add it there:

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';

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

For Feature Modules (Lazy Loaded)

If you imported HttpClientModule in a lazy-loaded feature module but the service throwing the error is in a different module (like a shared module), the provider won't be available. The fix: move your HttpClientModule import to the root AppModule or the SharedModule that all components can see. Never put it in a lazy module unless that module is the only place using HTTP.

Also check if you're using HttpClient directly in a component without injecting it through a service. That works, but you still need the module-level import.

Advanced Fix (15+ minutes) – Custom providers, testing, or Angular version issues

If neither fix worked, something trickier is going on. Here's how to dig deeper.

1. Check for Circular Dependencies or Misconfigured Providers

Sometimes you have two modules that import each other, or you're providing HttpClient manually with useClass or useFactory and it's conflicting. Open your providers array in any module and look for anything related to HttpClient. If you see something like:

providers: [
  { provide: HttpClient, useClass: MyCustomHttpClient }
]

Remove that custom provider temporarily and test. If the error goes away, your custom provider has a bug.

2. Angular Testing (Jasmine/Karma) – Add HttpClientTestingModule

Getting this error only in unit tests? In your .spec.ts file, import HttpClientTestingModule instead of HttpClientModule. That's the test-friendly version.

import { HttpClientTestingModule } from '@angular/common/http/testing';

beforeEach(async () => {
  await TestBed.configureTestingModule({
    imports: [HttpClientTestingModule],
    declarations: [YourComponent]
  }).compileComponents();
});

3. Angular Version Mismatch or Broken Dependencies

Sometimes you're running Angular 11 code on Angular 17, or you have conflicting versions of @angular/common/http. Run ng version and check your package.json. All Angular packages should be the same major version. If they're not, update them:

ng update @angular/core @angular/cli @angular/common

After updating, clear your node_modules and reinstall:

rm -rf node_modules package-lock.json
npm install

4. Lazy-Loaded Module with Its Own Injection Context

If you're using Angular elements or a micro-frontend setup (like with Module Federation), each module might have its own injector. In that case, you need to provide HttpClient at the root level using providedIn: 'root' in your service:

@Injectable({
  providedIn: 'root'
})
export class DataService {
  constructor(private http: HttpClient) { }
}

This bypasses module-level providers entirely. If you already have providedIn: 'root' and still get the error, then the service itself isn't being injected correctly – check if you're importing the service from the right path.

Still stuck? Try this blunt checklist

• Did you restart the dev server after changing app.module.ts? Yes, you need to. ng serve doesn't hot-reload module imports.
• Are you editing the right file? If you have multiple app.module.ts files (like in a monorepo), check the one in your actual app.
• Did you add HttpClientModule to a SharedModule but forget to export it? Add exports: [HttpClientModule] to that module.
• Running Angular Universal (SSR)? You might need HttpClientModule in both the browser and server app modules.
• Did you include HttpClient in a component's providers array by mistake? That can override the root provider. Remove it from the component's @Component decorator.

I've seen this error pop up from all these scenarios over the years. Start with the quick fix – nine times out of ten, that's it. If not, work through the moderate fix. The advanced stuff is for weird setups or testing. You'll get it sorted.