如何将Azure DevOps流水线运行编号注入到Angular应用构建产物文件？

你需要获取的构建编号对应Azure DevOps内置变量$(Build.BuildNumber)，参考示意图：

以下是两种最常用的可行方案：

方案1：构建时替换环境变量（推荐，性能最优） #

这个方案直接把构建编号打包进Angular的生产环境配置里，运行时不需要额外请求：

• 第一步：在Angular项目的src/environments/environment.prod.ts中新增构建编号变量，默认值填占位符：

export const environment = {
  production: true,
  // 新增字段，占位符后续会被流水线替换
  buildNumber: 'PLACEHOLDER_BUILD_NUMBER'
};

• 第二步：在需要展示构建编号的组件中直接引用该变量：

import { environment } from '../environments/environment';
// 组件内直接使用
public appBuildVersion = environment.buildNumber;

• 第三步：配置Azure DevOps流水线，在执行ng build构建命令前，新增一个脚本任务替换占位符：
  如果你用Windows代理，用PowerShell命令：

  (Get-Content src/environments/environment.prod.ts) -replace 'PLACEHOLDER_BUILD_NUMBER', '$(Build.BuildNumber)' | Set-Content src/environments/environment.prod.ts
  

  如果你用Linux/macOS代理，用Shell命令：

  sed -i "s/PLACEHOLDER_BUILD_NUMBER/$(Build.BuildNumber)/g" src/environments/environment.prod.ts
  

• 第四步：正常执行Angular构建命令ng build --configuration production即可，打包后的产物已经内置了正确的构建编号。

方案2：静态文件存储构建编号（灵活度最高） #

这个方案把构建编号存在单独的静态文本文件里，无需修改Angular编译产物即可更新编号，适合需要在部署阶段修改版本号的场景：

• 第一步：在Angular项目的src/assets目录下新建空的version.txt文件，加入.gitignore避免本地修改被提交。
• 第二步：Angular项目中新增服务，应用启动时请求该文件获取构建编号：

// 示例服务代码
@Injectable({providedIn: 'root'})
export class VersionService {
  public buildNumber$ = this.http.get('/assets/version.txt', {responseType: 'text'});
  constructor(private http: HttpClient) {}
}

• 第三步：配置Azure DevOps流水线，在执行ng build前，把构建编号写入该文件：
  PowerShell命令：

  '$(Build.BuildNumber)' | Out-File src/assets/version.txt -Encoding utf8
  

  Shell命令：

  echo $(Build.BuildNumber) > src/assets/version.txt
  

• 后续部署阶段如果需要修改版本号，直接修改打包产物中assets/version.txt的内容即可，不需要重新构建Angular代码。

注意：如果你的Angular应用配置了PWA或者静态资源强缓存，需要给version.txt配置不缓存的规则，避免拿到旧的构建编号。

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