在Azure CI/CD部署.NET/Angular应用：仅Dev环境启用调试配置

方案1：分环境构建生成独立构件（推荐） #

利用Angular原生的多环境构建能力，直接为Dev和Prod生成适配各自需求的构件：

• 修改项目根目录的angular.json，新增dev构建配置，同时保留原production配置：

  "architect": {
    "build": {
      "configurations": {
        "production": {
          "optimization": true,
          "sourceMap": false,
          "aot": true,
          // 其他生产环境默认配置
        },
        "dev": {
          "optimization": false,
          "sourceMap": true,
          "aot": false,
          "extends": "development"
        }
      }
    }
  }
  

• 在Azure CI管道中添加两个构建任务：
  • Dev环境构建：执行ng build --configuration=dev，将前端产物与.NET后端打包为dev-app-artifact
  • Prod环境构建：执行ng build --configuration=production，打包为prod-app-artifact
• 部署阶段通过条件判断，Dev阶段拉取dev-app-artifact部署，Prod阶段拉取prod-app-artifact部署

方案2：全量构建后部署阶段动态调整 #

如果不想拆分构建流程，可先生成包含调试信息的全量产物，再在部署时针对Prod环境做优化清理：

• 修改angular.json的production配置，临时开启sourceMap: true、optimization: false，构建生成带调试信息的统一产物
• Dev部署阶段直接部署该产物，保留调试能力
• Prod部署阶段添加脚本任务：
  • 删除所有.map后缀的文件，清除sourceMap信息
  • 使用terser工具对已构建的JS文件进行压缩优化（替代构建时的optimization步骤）

  注意：事后优化无法完全替代Angular原生production构建的静态分析优化，可能存在性能或代码体积的差异

方案3：管道变量动态控制构建参数 #

通过Azure管道的变量和条件逻辑，在单次管道运行中根据目标环境切换构建参数：

• 在Azure管道定义中添加一个可选参数TargetEnvironment，选项为Dev/Prod
• 构建任务中根据参数执行对应命令：

  if ($env:TargetEnvironment -eq "Dev") {
    ng build --configuration=dev
  } else {
    ng build --configuration=production
  }
  

• 配合管道阶段的条件触发，让Dev和Prod部署阶段分别触发对应的构建流程，生成适配构件后完成部署

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