如何通过GitLab CI/CD为Angular注入环境变量？是否需手动配置？

Angular不会像Quarkus/Spring那样自动识别并替换代码或配置文件中的$MY_VAR这类环境变量占位符，必须手动添加处理逻辑才能实现自动配置。下面分两种场景说明具体实现方式：

一、处理environment.ts #

你有两种常用方案可选：

• 直接脚本替换：在GitLab CI的构建任务中，用sed命令直接替换environment.ts里的占位符。示例CI脚本：

  # 替换environment.ts中的$MY_VAR为CI变量值
  sed -i "s/\$MY_VAR/$MY_VAR/g" src/environments/environment.ts
  # 执行Angular构建
  ng build --configuration=production
  

• 模板文件+变量替换工具：先创建environment.template.ts模板文件，把需要替换的变量写成{{MY_VAR}}格式，再用envsubst工具生成最终的environment.ts。示例：

  # 从模板生成环境文件
  envsubst < src/environments/environment.template.ts > src/environments/environment.ts
  ng build --configuration=production
  

  模板文件示例内容：

  export const environment = {
    production: true,
    myVar: '{{MY_VAR}}'
  };
  

二、处理proxy.config.json #

Angular的代理配置文件同样没有自动替换变量的机制，只能通过CI阶段的脚本处理：

• 用sed直接替换：

  sed -i "s/\$MY_API_URL/$MY_API_URL/g" src/proxy.config.json
  # 如果是启动开发服务，执行ng serve --proxy-config src/proxy.config.json
  

• 或者用模板文件+envsubst，和environment.ts的处理逻辑一致，先写proxy.config.template.json，再生成正式配置文件。

总结 #

不需要在angular.json里手动配置所有环境变量，核心是利用GitLab CI的脚本能力，在构建/启动前完成变量替换。如果需要区分多环境（比如开发、测试、生产），可以在angular.json中定义不同的配置项，但变量替换的逻辑还是要手动通过CI脚本实现。

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