Azure Static Web Apps部署Angular项目环境变量未更新问题排查

针对本地构建环境变量正常，但Azure DevOps流水线构建后环境变量未更新的问题，可按以下步骤排查解决：

1. 修复构建命令的引号问题 #

你的package.json中build-dev命令使用了单引号包裹dev：

"build-dev": "ng build --configuration='dev'",

单引号在部分Shell环境（比如Windows CMD）中会被当作参数的一部分解析，导致Angular无法识别正确的配置名称。修改为无引号或双引号形式：

"build-dev": "ng build --configuration=dev",
// 或者
"build-dev": "ng build --configuration \"dev\"",

2. 验证构建产物中的环境变量 #

在流水线的构建步骤后添加命令，直接检查dist文件夹中的环境变量内容，确认是构建环节还是部署环节的问题：

• 如果使用Linux/Ubuntu代理：

- script: grep -r "YOUR_ENV_VAR_KEY" dist/
  displayName: 'Check environment variable in dist'

• 如果使用Windows代理：

- script: findstr /s "YOUR_ENV_VAR_KEY" dist\*
  displayName: 'Check environment variable in dist'

把YOUR_ENV_VAR_KEY替换成你环境变量里的实际键名（比如apiUrl），如果输出为空，说明构建时没替换成功；如果有输出，可能是部署环节的缓存问题。

3. 清理流水线缓存 #

Azure DevOps可能会缓存node_modules或dist文件夹，导致旧的构建产物被重复部署。在构建步骤前添加清理命令：

- script: |
    rm -rf node_modules
    rm -rf dist
  displayName: 'Clean existing artifacts'

4. 对齐Angular CLI版本 #

本地和流水线中的Angular CLI版本不一致可能导致构建行为差异。在流水线中指定和本地一致的CLI版本：

- script: |
    npm install -g @angular/cli@16.2.0 # 替换成你本地的CLI版本号
    npm install 
    npm run build-dev
  displayName: 'npm install and build with specific CLI version'

你可以在本地执行ng version查看当前版本号。

5. 确认环境文件已提交到仓库 #

检查Azure DevOps仓库中的src/environments/environment.dev.ts是否是最新版本，避免本地修改后未推送到远程仓库，导致流水线拉取的是旧文件。

6. 检查Angular构建日志 #

查看流水线中构建步骤的详细日志，查找是否有如下类似输出：

Replacing src/environments/environment.ts with src/environments/environment.dev.ts
如果没有这条日志，说明angular.json中的配置位置错误。确认dev配置是否位于projects -> [你的项目名称] -> architect -> build -> configurations节点下，结构如下：

"projects": {
  "your-project-name": {
    "architect": {
      "build": {
        "configurations": {
          "dev": {
            // 你的dev配置内容
          }
        }
      }
    }
  }
}

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