如何确认Angular应用最终使用的environment.ts文件？

一、从配置文件直接确认 #

先看angular.json里的构建配置，这是最直接的方式：

1. 打开项目根目录的angular.json，定位到projects -> my-web-client -> architect -> build -> configurations节点，这里会列出所有预定义的构建环境配置。每个配置里的fileReplacements字段明确指定了要替换的environment文件，比如：

   "production": {
     "fileReplacements": [
       {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.prod.ts"
       }
     ],
     // 其他编译配置...
   },
   "devProduction": {
     "fileReplacements": [
       {
         "replace": "src/environments/environment.ts",
         "with": "src/environments/environment.dev.ts"
       }
     ],
     // 其他编译配置...
   }
   

2. 再看architect -> build -> defaultConfiguration字段，这个值就是ng build命令默认使用的配置。你之前遇到的问题就是这里被设为了production，所以执行npm run build时，默认会用environment.prod.ts的配置。

二、从构建产物验证实际使用的环境 #

如果想确认最终打包进产物的是哪个环境的配置，可以用这两个方法：

• 给环境文件加标识字段：在每个environment.*.ts里添加一个容易识别的标识，比如：
  • environment.ts：

    export const environment = {
      production: false,
      envIdentifier: 'dev-local'
    };
    

  • environment.prod.ts：

    export const environment = {
      production: true,
      envIdentifier: 'prod-release'
    };
    

    构建完成后，直接在dist目录里搜索这个标识：

    grep -r "envIdentifier" /app/dist
    

    输出结果就能明确看到实际打包的是哪个环境的值。
• 反编译压缩后的JS文件：找到dist目录下的main.*.js文件，用代码格式化工具（比如prettier）处理后，搜索environment相关内容，也能找到对应配置。不过这种方法比加标识麻烦，优先推荐前者。

三、调整Docker构建脚本，避免依赖默认配置 #

你当前Dockerfile里用npm run build，会依赖angular.json的默认配置，容易混淆。可以改成明确指定环境的命令：

• 如果要构建开发环境：

  npm run build:development
  

• 如果要构建生产环境：

  npm run build:production
  

也可以直接在Dockerfile里使用ng命令指定配置，跳过package.json的脚本：

ng build --configuration=devProduction

如果需要动态切换环境，还可以用构建参数：

ARG BUILD_ENV=production
RUN ng build --configuration=$BUILD_ENV

构建镜像时通过--build-arg参数切换：

docker build --build-arg BUILD_ENV=devProduction -t my-app .

内容的提问来源于stack exchange，提问作者Pure.Krome