Angular4 min read2026-03-01

Angular NullInjectorError: No provider for Service

Fix NullInjectorError: R3InjectorError(AppModule)[MyService -> MyService] by providing services properly.

Error Code / Stack Trace

NullInjectorError: No provider for HttpClient! (UserService -> HttpClient)

Problem Overview

An injected service or token cannot be resolved because it was not provided in the root injector or module providers array.

Why Does This Happen?

Using HttpClient without importing provideHttpClient() or HttpClientModule.
The service class is missing the @Injectable({ providedIn: 'root' }) decorator.
In standalone components, forgetting to add the service to the providers array.

Step-by-Step Solution

Step 1: Add providedIn: 'root' to your service

Ensure the service registers itself in the application root injector.

typescript

@Injectable({
  providedIn: 'root'
})
export class UserService {
  // Service code
}

Step 2: Provide HttpClient in app.config.ts

For modern Angular apps, provide the HTTP client in ApplicationConfig.

typescript

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()
  ]
};

Common Mistakes to Avoid

•Providing a service in both a child component and root, causing duplicate instances with disconnected state.

Prevention & Best Practices

Default to providedIn: 'root' for all singleton data services.

Frequently Asked Questions

What is the difference between provideHttpClient() and HttpClientModule?

HttpClientModule is the legacy NgModule approach. provideHttpClient() is the modern standalone function recommended in Angular 15+.