Angular 17.3升级至18.0后ng serve本地开发服务器异常

算力阿峰

2026-6-22

Angular 17.3 升级至 18.0 后 ng serve 部分 API 404 故障排查方案

检查代理配置的语法兼容性
Angular 18 对代理配置的解析逻辑做了严格调整，尤其是带动态参数的路径（比如 /api/v1/permissions/<username>）。旧版本可能兼容松散的匹配规则，新版本完全遵循 HTTP 代理中间件的标准规则。
打开你的 proxy.conf.json（或 proxy.conf.js），确保动态路径的匹配规则正确，示例配置：
```
{
  "/api/v1/*": {
    "target": "你的云端后端地址",
    "secure": false,
    "changeOrigin": true,
    "pathRewrite": {"^/api/v1": ""}
  }
}
```
若使用 JS 格式的代理配置，确认正则表达式的捕获组是否正确处理了动态参数，避免路径截断。
排查前端路由冲突
Angular 18 优化了路由匹配优先级，本地开发服务器可能优先匹配前端路由而非转发代理请求。检查你的应用路由模块，确认没有定义和 /api/v1/permissions/* 重叠的前端路由。如果存在冲突，调整路由顺序，或在路由配置末尾添加通配符路由：
```
{ path: '**', redirectTo: '', pathMatch: 'full' }
```
确保 API 请求不会被前端路由拦截。
清理缓存并重建依赖
升级后的缓存残留可能导致异常，执行以下命令彻底清理：
```
rm -rf node_modules package-lock.json
npm install
ng cache clean
ng serve
```
验证请求的实际路径
打开浏览器开发者工具的 Network 面板，查看 404 请求的完整 URL，确认路径重写是否正确。比如检查 /api/v1/permissions/testuser 是否被正确转发到后端的 /permissions/testuser，而非错误截断为 /permissions。
对齐 Angular CLI 版本
确保全局 CLI 和项目本地 CLI 版本一致，执行 ng version 查看。若版本不一致，更新全局 CLI：
```
npm install -g @angular/cli@18
```