Angular 18中HttpClientModule已弃用，替代方案是什么？

弃用原因 #

Angular 18标记HttpClientModule为弃用，核心是对齐框架主推的**独立组件（Standalone）**架构方向：

• HttpClientModule是NgModule时代的产物，依赖模块导入机制，在独立组件场景下冗余且增加不必要的模块层级。
• 新的独立API（provideHttpClient()）更轻量化，支持按需配置，能更好地配合树摇优化，减少最终打包体积。
• 统一了依赖注入的注册方式，不管是NgModule项目还是独立组件项目，都能用一致的方式注册HttpClient能力，提升代码一致性和灵活性。

替代方案 #

根据项目类型（NgModule/独立组件），有两种具体替换方式：

1. 传统NgModule项目 #

在AppModule中，移除imports数组里的HttpClientModule，改用provideHttpClient()注册到providers数组：

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

@NgModule({
  imports: [
    BrowserModule,
    // 移除 HttpClientModule
    ...
  ],
  declarations: [
    AppComponent,
    ...
 ],
  providers: [
    provideHttpClient(), // 注册HttpClient
    ...
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {} 

2. 独立组件（Standalone）项目 #

如果项目使用独立组件，可在组件级别或应用启动时注册：

• 应用全局注册：在bootstrapApplication中配置：

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

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

• 单个组件注册：在组件的providers数组中添加：

import { Component } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  providers: [provideHttpClient()],
  template: `...`
})
export class AppComponent {}

带拦截器的配置 #

如果需要使用HTTP拦截器，直接通过provideHttpClient的配置项添加：

import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { authInterceptor } from './auth.interceptor';

provideHttpClient(
  withInterceptors([authInterceptor])
)

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