升级至Angular 17后编译报错：ɵwithHttpTransferCache未找到

问题描述 #

将应用升级至Angular 17后，编译时出现如下异常：

./node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:2016:81-103
Error: export 'ɵwithHttpTransferCache' (imported as 'ɵwithHttpTransferCache') was not found in '@angular/common/http'
(possible exports: HTTP_INTERCEPTORS, HttpBackend, HttpClient, HttpClientJsonpModule, HttpClientModule, HttpClientXsrfModule, HttpContext, HttpContextToken, HttpErrorResponse, HttpEventType, HttpHandler, HttpHeaderResponse, HttpHeaders, HttpParams, HttpRequest, HttpResponse, HttpResponseBase, HttpUrlEncodingCodec, HttpXhrBackend, HttpXsrfTokenExtractor, JsonpClientBackend, JsonpInterceptor, XhrFactory, ɵHttpInterceptingHandler, ɵangular_packages_common_http_http_a, ɵangular_packages_common_http_http_b, ɵangular_packages_common_http_http_c, ɵangular_packages_common_http_http_d, ɵangular_packages_common_http_http_e, ɵangular_packages_common_http_http_f, ɵangular_packages_common_http_http_g)

./node_modules/@angular/platform-browser/fesm2022/platform-browser.mjs:2101:252-274
Error: export 'ɵwithHttpTransferCache' (imported as 'ɵwithHttpTransferCache') was not found in '@angular/common/http'
(possible exports: HTTP_INTERCEPTORS, HttpBackend, HttpClient, HttpClientJsonpModule, HttpClientModule, HttpClientXsrfModule, HttpContext, HttpContextToken, HttpErrorResponse, HttpEventType, HttpHandler, HttpHeaderResponse, HttpHeaders, HttpParams, HttpRequest, HttpResponse, HttpResponseBase, HttpUrlEncodingCodec, HttpXhrBackend, HttpXsrfTokenExtractor, JsonpClientBackend, JsonpInterceptor, XhrFactory, ɵHttpInterceptingHandler, ɵangular_packages_common_http_http_a, ɵangular_packages_common_http_http_b, ɵangular_packages_common_http_http_c, ɵangular_packages_common_http_http_d, ɵangular_packages_common_http_http_e, ɵangular_packages_common_http_http_f, ɵangular_packages_common_http_http_g)

原因分析 #

ɵwithHttpTransferCache是Angular内部API，在Angular 17版本中该API被移除或调整了归属包。报错核心原因是**@angular/platform-browser与@angular/common/http版本不匹配**，或者项目依赖的第三方库仍在调用已废弃的旧API。

解决方案 #

1. 统一Angular核心包版本 #

确保所有Angular核心依赖包版本一致，均为17.x版本。执行以下命令更新：

npm install @angular/platform-browser@17 @angular/common@17 @angular/http@17

若使用Yarn则执行：

yarn add @angular/platform-browser@17 @angular/common@17 @angular/http@17

2. 清理依赖缓存并重新安装 #

删除旧依赖文件和锁文件，彻底重新安装依赖：

• 执行命令删除文件：

  # Linux/macOS
  rm -rf node_modules package-lock.json
  # Windows
  rmdir /s /q node_modules && del package-lock.json
  

• 重新安装依赖：

  npm install
  

3. 排查第三方依赖兼容性 #

如果上述操作后仍报错，检查项目中使用的第三方库是否支持Angular 17。找到依赖旧API的库，更新至兼容版本或替换为替代方案。

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