如何检查Angular项目当前所处的运行环境（LOCAL/DEV/STAGING/PROD）

Angular 原生的 environment 配置体系本身支持多环境扩展，无需依赖仅能做二元判断的isDevMode()方法，具体实现步骤如下：

实现步骤 #

• 扩展环境配置文件
  在项目src/environments目录下新增对应环境的配置文件，每个文件新增自定义的envType字段明确标识环境类型：
  本地默认配置environment.ts：

  export const environment = {
    production: false,
    envType: 'LOCAL'
  };
  

  服务端DEV环境配置environment.dev.ts：

  export const environment = {
    production: false,
    envType: 'DEV'
  };
  

  服务端STAGING环境配置environment.staging.ts：

  export const environment = {
    production: true,
    envType: 'STAGING'
  };
  

  服务端PROD环境配置environment.prod.ts：

  export const environment = {
    production: true,
    envType: 'PROD'
  };
  

• 配置angular.json的环境替换规则
  找到angular.json中projects -> 你的项目名 -> architect -> build -> configurations节点，新增DEV、STAGING的配置，指定文件替换规则：

  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      // 原有production配置保持不变
    },
    "staging": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.staging.ts"
        }
      ],
      // 其他配置可和production保持一致
    },
    "dev": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.dev.ts"
        }
      ]
    }
  }
  

  同时给serve命令新增对应配置，方便本地模拟不同服务端环境：

  "serve": {
    "configurations": {
      "production": {
        "browserTarget": "你的项目名:build:production"
      },
      "staging": {
        "browserTarget": "你的项目名:build:staging"
      },
      "dev": {
        "browserTarget": "你的项目名:build:dev"
      }
    }
  }
  

• 业务代码中判断环境
  直接引入environment变量通过envType判断即可：

import { environment } from 'src/environments/environment';

if (environment.envType === 'LOCAL') {
  // 本地ng serve运行时执行的逻辑
} else if (environment.envType === 'DEV') {
  // 服务端DEV环境逻辑
} else if (environment.envType === 'STAGING') {
  // 服务端STAGING环境逻辑
} else if (environment.envType === 'PROD') {
  // 生产环境逻辑
}

• 运行/打包指定环境
  • 本地默认运行LOCAL环境：ng serve
  • 本地模拟服务端DEV环境：ng serve -c dev
  • 服务端DEV环境打包：ng build -c dev
  • 服务端STAGING环境打包：ng build -c staging
  • 服务端PROD环境打包：ng build -c production

注意事项 #

不要依赖isDevMode()做多环境判断，该方法仅通过production字段返回布尔值，只能区分是否开启生产优化，无法满足多环境细分需求。

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