Angular项目持续报NullInjectorError：无_HttpClient提供者

错误原因 #

你的应用环境注入器中缺少HttpClient的提供者，核心问题是应用的配置提供者没有正确包含provideHttpClient()，或者main.ts没有合并app.config.ts里的核心配置，导致依赖注入系统找不到HttpClient的注册信息。

解决方案 #

有两种可行的修复方式，任选其一即可：

方案1：在app.config.ts中添加provideHttpClient()并使用完整配置 #

修改app.config.ts，导入并添加provideHttpClient()到提供者数组：

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http'; // 新增导入

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideClientHydration(withEventReplay()),
    provideHttpClient() // 新增HttpClient提供者
  ]
};

然后修改main.ts，使用完整的appConfig配置启动应用：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config'; // 导入appConfig

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

方案2：在main.ts中合并app.config.ts的提供者与provideHttpClient() #

如果希望在main.ts中单独管理部分提供者，需要合并app.config.ts里的核心配置：

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

bootstrapApplication(AppComponent, {
  providers: [
    ...appConfig.providers, // 合并核心配置提供者
    provideHttpClient()
  ]
}).catch((err) => console.error(err));

额外检查 #

确保你的Angular版本在14及以上，provideHttpClient()是Angular 14推出的Standalone API，若使用更早版本，需切换到模块模式并在AppModule中导入HttpClientModule（但你的项目采用Standalone组件架构，建议升级到14+版本）。

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