Angular 18无app.config.ts时配置HttpClient使用fetch的方法

在Angular 18的NgModule项目（使用app.module.ts而非app.config.ts）中，你可以通过以下步骤配置HttpClient启用fetch API，解决NG02801错误：

步骤1：导入必要的依赖 #

在app.module.ts中，移除原有的HttpClientModule导入，替换为provideHttpClient和withFetch：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// 导入HttpClient配置函数
import { provideHttpClient, withFetch } from '@angular/common/http';
import { AppComponent } from './app.component';

步骤2：在NgModule的providers中配置HttpClient #

在@NgModule的providers数组中添加provideHttpClient(withFetch())，替代原有的HttpClientModule导入：

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  // 配置HttpClient启用fetch API
  providers: [provideHttpClient(withFetch())],
  bootstrap: [AppComponent]
})
export class AppModule { }

补充说明 #

• provideHttpClient(withFetch())会将HttpClient的底层实现切换为浏览器原生的fetch API，满足SSR场景下的性能和兼容性要求。
• 如果你之前已经导入了HttpClientModule，必须将其从imports数组中移除，避免依赖冲突。
• 若项目使用Angular Universal进行SSR，需在服务端模块（如app.server.module.ts）中执行相同配置，保证前后端行为一致。

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