Angular 17 API服务订阅异常：HttpClient注入失败报NullInjectorError

控制台报错信息：

main.ts:5 ERROR NullInjectorError: R3InjectorError(Standalone[_HomeComponent])[_EventosService -> _EventosService -> _EventosService -> _HttpClient -> _HttpClient]: 
  NullInjectorError: No provider for _HttpClient!
    at NullInjector.get (core.mjs:1654:27)
    at R3Injector.get (core.mjs:3093:33)
    at R3Injector.get (core.mjs:3093:33)
    at injectInjectorOnly (core.mjs:1100:40)
    at Module.ɵɵinject (core.mjs:1106:42)
    at Object.EventosService_Factory [as factory] (eventos.service.ts:8:28)
    at core.mjs:3219:47
    at runInInjectorProfilerContext (core.mjs:866:9)
    at R3Injector.hydrate (core.mjs:3218:21)
    at R3Injector.get (core.mjs:3082:33)

项目环境：Angular 17（由Angular 16迁移而来），独立组件HomeComponent中已导入HttpClientModule，后端.NET API可通过其他工具正常访问。

相关代码文件：

home.component.ts #

import { Component, OnInit } from '@angular/core';
import { EventosService } from '../../shared/services/eventos/eventos.service';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';

@Component({
  selector: 'app-home',
  standalone: true,
  templateUrl: './home.component.html',
  imports: [CommonModule, HttpClientModule],
  styleUrls: ['./home.component.sass']
})

export class HomeComponent implements OnInit{

  constructor( private es: EventosService ) {}

  usuarios : any = {};
  
  ngOnInit(): void {
    this.es.getEventos().subscribe(data => {
      this.usuarios = data;
    });
    console.log(this.usuarios);
  }

}

eventos.services.ts #

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

@Injectable(
  {providedIn: 'root'}
)
export class EventosService {

  private baseUrl = "https://localhost:7019/api";

  constructor( private http: HttpClient ) { }

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

}

说明：服务名为Eventos但API请求Usuarios是测试用，后端接口正常。

问题根源：EventosService是根注入器提供的（providedIn: 'root'），但你仅在HomeComponent的导入数组中添加HttpClientModule，根注入器无法获取到HttpClient的提供者。

方案一（推荐：全局提供） #

在应用入口main.ts的bootstrapApplication配置中，通过provideHttpClient()全局注册HttpClient：

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

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

方案二（组件级提供） #

修改EventosService的提供范围为当前组件，在HomeComponent的providers数组中添加该服务：

@Component({
  selector: 'app-home',
  standalone: true,
  templateUrl: './home.component.html',
  imports: [CommonModule, HttpClientModule],
  providers: [EventosService], // 新增此行
  styleUrls: ['./home.component.sass']
})

注：方案一适用于多组件需使用HttpClient或该服务的场景；方案二仅当前组件及其子组件可使用该服务。

内容的提问来源于stack exchange，提问作者fm_manueljesus00