Angular 15构建完成后进程不退出导致后续脚本无法执行的解决办法

修复方案 #

1. 显式禁用watch模式 #

Angular 15的构建命令可能因配置默认开启watch模式，强制关闭即可：
修改构建脚本，添加--watch=false或--no-watch参数：

"build:project:prod": "ng build project --configuration prod --stats-json=true --single-bundle=true --no-watch && npm run copyAssets"

2. 检查项目配置文件 #

打开angular.json，找到对应项目的生产环境构建配置，确保watch和liveReload属性设为false：

{
  "projects": {
    "project": {
      "architect": {
        "build": {
          "configurations": {
            "prod": {
              "watch": false,
              "liveReload": false
              // 其他生产环境配置项
            }
          }
        }
      }
    }
  }
}

3. 强制清理残留进程 #

如果构建后仍有子进程残留，可在脚本中添加进程清理逻辑（注意环境兼容性）：

• Linux/macOS环境：

"build:project:prod": "ng build project --configuration prod --stats-json=true --single-bundle=true --no-watch; pkill -f 'ng build' || true && npm run copyAssets"

• Windows环境：

"build:project:prod": "ng build project --configuration prod --stats-json=true --single-bundle=true --no-watch; taskkill /F /IM node.exe 2>nul || true && npm run copyAssets"

4. 改用CI专用构建模式 #

Angular CLI的ci配置会自动优化CI环境的构建行为，禁用watch等可能阻塞进程的特性：

"build:project:prod": "ng build project --configuration prod,ci --stats-json=true --single-bundle=true && npm run copyAssets"

需确保angular.json中已定义ci配置，若未定义，直接用--no-watch参数即可。

5. 拆分串行脚本 #

将构建和资产复制拆分为独立脚本，避免依赖&&的串行执行逻辑：

"scripts": {
  "build:project:prod": "ng build project --configuration prod --stats-json=true --single-bundle=true --no-watch",
  "copyAssets": "你的资产复制命令",
  "deploy:prod": "npm run build:project:prod && npm run copyAssets"
}

执行时调用npm run deploy:prod即可。

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