CODEWITHSUNDEEP
angularrxjsangular-httpclientangular-standalone-componentsangular-dependency-injection
user84
user84

Reputation: 885

Angular 19 Standalone Component Error: "No provider for _HttpClient" Despite HttpClientModule Imported

I am working on an Angular standalone application and encountering the following error when using HttpClient in my DataService:

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_AuthComponent])[_DataService -> _DataService -> _HttpClient -> _HttpClient]: NullInjectorError: No provider for _HttpClient!

What I Have Done: Environment Details:

Angular Version: 19.0.4 Node.js Version: v20.18.1 TypeScript Version: 5.6.3

Relevant Code:

data.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  getTransactions(): Observable<any> {
    return this.http.get('/api/transactions');
  }
}

auth.component.ts:

import { Component } from '@angular/core';
import { DataService } from '../../services/data.service';
import { HttpClientModule } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss'],
  standalone: true,
  imports: [CommonModule, HttpClientModule, FormsModule],
})
export class AuthComponent {
  username = '';
  password = '';
  message: string | null = null;

  constructor(private dataService: DataService) {}

  login() {
    this.dataService
      .getTransactions()
      .subscribe(data => console.log('Transactions:', data));
  }
}

What I Have Tried:

  1. Confirmed HttpClientModule is imported in all standalone components requiring it.
  2. Verified DataService is properly injected and declared with @Injectable({ providedIn: 'root' }).
  3. Ensured Angular and dependencies are updated (using ng update).
  4. Cleared Angular cache with ng cache clean and restarted the development server.
  5. Added console logs to confirm initialization of HttpClient and DataService.

Still Observed Behavior: Despite these efforts, the application fails to resolve HttpClient and continues to throw the error.

My Question:

  1. Why am I seeing this error even though HttpClientModule is imported in the standalone component?
  2. Are there any additional steps I might have missed when working with standalone components and HttpClient?

Any help or insights are greatly appreciated. Thanks in advance!

enter image description here

Upvotes: 3

Views: 1622

Answers (2)

ThePunisherProgrammer
ThePunisherProgrammer

Reputation: 1

Another solution that worked for me is providing HttpClient using the provideHttpClient helper function in app.config.ts

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

You can see this in here

Upvotes: 0

Andrei
Andrei

Reputation: 12206

standalone component imports act in a different way rather than modules in respects to providers. HttpClientModule contains only providers and how it is done in question doesn't make sense.

what you wanted to do is rather provide providers from the module in component providers:

@Component({
  selector: 'app-auth',
  templateUrl: './auth.component.html',
  styleUrls: ['./auth.component.scss'],
  standalone: true,
  imports: [CommonModule, FormsModule],
  providers: [importProvidersFrom(HttpClientModule)]
})

but this is actually the worst possible way to make it work. instead provide http client with built in provideHttpClient() utility specifically designed for standalone apis and do it IN THE ROOT CONFIGURATION rather than somewhere in the component.

// config
[
 // other modules
 provideRouter(),
 provideHttpClient(),
]

if you provide httpClient in many places (in your case in auth component, some other component) there will be several instances of client instantiated which will cause interceptors to break.

Upvotes: 1

Related Questions