Angular 17独立组件中使用HTTP服务报错求助

问题原因 #

报错的本质是HttpClient的依赖提供者未在应用中配置。Angular 17的独立组件/应用模式下，默认不会自动引入HttpClient的相关提供者；你的AuthService依赖HttpClient，当Angular尝试注入AuthService时，找不到HttpClient的提供者，就抛出了NullInjectorError。

移除HttpClient后服务能正常运行，是因为此时AuthService没有依赖任何未注册的服务，注入链可以正常完成。错误信息中的e是Angular对标识符做混淆后的结果，实际指代的就是HttpClient。

解决办法 #

根据你的项目类型（独立应用/带NgModule的应用），选择以下任一方案：

方案1：独立应用（无NgModule） #

在main.ts的bootstrapApplication配置中，添加provideHttpClient()到提供者数组：

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

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

方案2：带NgModule的应用 #

在根模块（比如AppModule）的imports数组中导入HttpClientModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

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