Angular 17: ‘No provider for _HttpClient!’ Error in Standalone Component with ApiService

I am working on an Angular 17 application that incorporates the Spotify API using the new standalone component feature and am encountering an issue when trying to inject the HttpClient into a service. Despite following the Angular documentation on how to properly import and provide the HttpClientModule, I keep receiving the following error:

Error:

ERROR Error [NullInjectorError]: R3InjectorError(Standalone[_HomeComponent])[_ApiService -> _ApiService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    at NullInjector.get ...

Api Service:

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

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private baseUrl = 'http://localhost:8888';

  constructor(private http: HttpClient) { }

  login(): Observable<any> {
    return this.http.get(`${this.baseUrl}/login`);
  }

  checkLoginStatus(): Observable<boolean> {
    return new Observable<boolean>(observer => {
      observer.next(true); // Dummy implementation
      observer.complete();
    });
  }
}

Main.ts:

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

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient()
  ],
}).catch((err) => console.error(err));

Home Component:

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api/api.service';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [
    CommonModule,
    HttpClientModule
  ],
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private apiService: ApiService) { }

  ngOnInit(): void {
    // Implementation omitted for brevity
  }
}

I’ve been working to resolve a “No provider for _HttpClient!” error in my Angular 16 application, following several steps aligned with Angular’s documentation. Initially, I ensured that my components were correctly marked as standalone (standalone: true), which resolved an earlier issue. Using Angular’s provideHttpClient documentation, I adjusted the bootstrapApplication configuration in main.ts, including the correct use of provideHttpClient() to globally provide HttpClient. Despite these adjustments and experimenting with different import and provide strategies for HttpClientModule, the injector error persists. I expected these efforts, especially following the official guidance and adjusting the bootstrap configuration, to make HttpClient available for injection throughout my application. The ongoing issue suggests a possible misunderstanding or oversight in configuring dependency injection or component setup in the context of Angular’s new standalone component features.

https://angular.dev/guide/http/setup#providing-httpclient-through-dependency-injection