非独立组件Angular应用中如何正确配置withFetch()？

你在app.server.module.ts中添加provideHttpClient(withFetch())的做法确实能解决问题，但更规范、更优的方案是在根模块app.module.ts的providers数组中统一配置，避免浏览器与SSR环境的配置不一致。

具体配置步骤 #

在app.module.ts的@NgModule装饰器内，将provideHttpClient(withFetch())加入providers列表：

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule],
  providers: [
    provideHttpClient(withFetch()) // 统一配置HttpClient的fetch适配器
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

为什么不推荐单独在服务器模块配置？ #

虽然在app.server.module.ts中配置能临时解决SSR报错，但服务器模块的提供者仅作用于服务器端渲染流程。如果浏览器端后续出现相关适配问题，你需要重复配置两次，增加维护成本。统一在根模块配置后，浏览器和SSR环境会共享同一份HttpClient配置，行为保持一致。

补充说明 #

withFetch()是Angular 17+推荐的HttpClient适配方案，它会自动在浏览器环境使用原生fetch，在Node.js环境使用内置的fetch polyfill，无需额外区分环境做特殊处理，统一配置完全满足需求。

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