升级Angular至18版本后如何解决ERR_NAME_NOT_RESOLVED错误

ERR_NAME_NOT_RESOLVED本质是域名解析失败，说明前端应用发起的请求无法将目标域名转换为IP地址。结合你的技术栈（Docker部署Java后端），按以下步骤排查：

1. 核对API请求的目标地址配置 #

• 检查环境配置文件（src/environments/*.ts）中的API地址，确认是否指向正确的后端域名/容器名。比如Docker环境下，前端应该请求后端容器的服务名（而非localhost，因为容器内localhost指向自身），例如http://backend-service:8080/api。
• 排查代码中是否存在硬编码的旧地址，升级过程中可能有配置文件被覆盖或重置，需确认所有请求的URL源头。

2. 验证Docker网络连通性 #

• 确认前端容器与Java后端容器处于同一Docker网络（可通过docker network inspect命令查看），只有同网络内的容器才能通过服务名互相访问。
• 进入前端容器内部，用curl测试后端地址：curl http://backend-service:8080/api/health，如果也出现解析失败，说明Docker网络配置有问题，需检查docker-compose或容器启动时的网络参数。

3. 检查Angular代理配置（开发环境） #

• Angular 18对代理配置（proxy.conf.json）的语法或规则是否有变更？核对配置中的target字段是否正确指向后端地址，同时确认pathRewrite、changeOrigin等参数是否符合需求。示例正确配置：

  {
    "/api": {
      "target": "http://backend-service:8080",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {"^/api": ""}
    }
  }
  

• 确认启动命令中是否正确加载了代理配置，比如ng serve --proxy-config proxy.conf.json，升级后可能有脚本命令被修改。

4. 排查Angular 18 HttpClient相关变更 #

• 检查是否在HttpClient拦截器中修改了请求URL，升级后拦截器的执行逻辑可能因框架变更出现异常，导致请求地址被错误改写。
• 确认是否使用了Angular 18新增的HTTP功能（如provideHttpClient的新配置），这些配置可能影响请求的域名解析逻辑。

5. 清除缓存与本地测试 #

• 清除浏览器的DNS缓存和页面缓存（快捷键Ctrl+Shift+R强制刷新），避免旧的解析记录干扰。
• 在本地直接运行前端（不通过Docker），测试请求后端地址是否正常，排除Docker环境之外的问题。

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