Angular 17升级后ng serve无法进入开发模式且无Source Map求助

核心问题定位 #

你的配置中最大的问题是代理规则把所有根路径(/)请求都转发到远程服务器，导致浏览器加载的完全是远程生产环境的资源，本地Dev Server编译的代码根本没被执行，所以会出现：

• 环境变量environment.production为true（远程生产环境配置）
• 本地代码修改不生效
• 无Source Map（远程资源没有生成Source Map）

分步修复方案 #

1. 修正代理配置（最关键） #

修改proxy.conf.js，删除最后一条context为['/']的代理规则，只保留API和WebSocket相关的代理：

var proxy_target = process.env.PROXY_TARGET || "1.2.3.4";

var PROXY_CONFIG = [
  {
      context: [
          "/api",
          "/rest"
      ],
      target: "https://" + proxy_target + ":443",
      secure: false,
      changeOrigin: true,
      logLevel: "debug",
      "headers": {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type, Authorization"
      }
  },
  {
      context: [
          "/stompEndpoint"
      ],
      target: "https://" + proxy_target + ":443",
      secure: false,
      changeOrigin: true,
      logLevel: "debug",
      ws: true,
      "headers": {
          "Access-Control-Allow-Origin": "*",
          "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
          "Access-Control-Allow-Headers": "Content-Type, Authorization"
      }
  }
];

module.exports = PROXY_CONFIG;

说明：只代理业务API和WebSocket请求，本地静态资源、编译后的JS/CSS由Angular Dev Server直接处理，避免全路径代理覆盖本地资源。

2. 确保环境变量加载正确 #

• 在src/environments/environment.ts中添加调试日志，验证是否加载了开发环境配置：

  export const environment = {
    production: false,
    optimization: false,
    apiHost: window.location.origin,
    apiBaseUrl: '/api/v1',
    baseUrl: '/',
    hostName: window.location.host,
    stompEndpoint: window.location.origin + '/stompEndpoint'
  };
  
  console.log('[DEBUG] 加载开发环境配置:', environment);
  

• 启动项目后，打开浏览器控制台，如果能看到这条日志，说明本地环境配置已加载；如果没有，检查代理规则是否还在拦截本地index.html请求。

3. 清理缓存并重新构建 #

执行以下命令清理旧缓存和依赖，避免配置残留：

# 清理Angular缓存
ng clean

# 删除依赖文件
rm -rf node_modules package-lock.json

# 重新安装依赖
npm install

# 启动开发服务器
npm run start

4. 调整Source Map配置（可选） #

修改angular.json中build的development配置，将sourceMap.hidden设为false，让浏览器能直接识别源文件：

"development": {
    "optimization": false,
    "sourceMap": {
        "scripts": true,
        "styles": true,
        "hidden": false, // 修改为false
        "vendor": true
    },
    "namedChunks": true,
    "extractLicenses": false,
    "buildOptimizer": false,
    "budgets": [
        {
            "type": "initial",
            "maximumWarning": "30mb",
            "maximumError": "50mb"
        },
        {
            "type": "anyComponentStyle",
            "maximumWarning": "20kb",
            "maximumError": "40kb"
        }
    ]
}

验证修复效果 #

启动项目后：

1. 浏览器控制台应能看到开发环境配置的调试日志
2. 修改本地组件代码，刷新浏览器后应能看到修改生效
3. 打开浏览器开发者工具的「Sources」面板，能看到本地的TypeScript源文件（而非打包后的JS）

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