Angular中是否存在getEnvironmentMode或等效的环境模式获取便捷方法？

好问题！Angular确实提供了isDevMode()这个便捷方法来判断是否处于开发环境，但并没有官方自带的getEnvironmentMode()这类能直接返回prod、dev、mock这类具体环境标识的API。

不过你不想手动在每个environment.*.ts文件里重复设置environmentMode变量的话，有几个省心的解决方案：

方案1：利用Angular CLI的文件替换特性自动配置 #

Angular CLI在构建时会根据你指定的--configuration（或旧版的--environment）参数自动替换对应的环境文件，我们可以利用这个特性来避免重复编写变量：

1. 先在基础的environment.ts中定义好基础变量：

export const environment = {
  production: false,
  environmentName: 'dev' // 默认开发环境
};

2. 针对其他环境（比如mock），只需要创建对应的environment.mock.ts，通过扩展基础环境的方式覆盖environmentName即可，不用重复写其他配置：

import { environment } from './environment';

export const environment = {
  ...environment,
  environmentName: 'mock'
};

3. 最后在angular.json的configurations里配置好这个环境的文件替换（如果还没配置的话）：

"configurations": {
  "mock": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.mock.ts"
      }
    ]
  }
}

这样当你运行ng serve --configuration mock时，Angular会自动加载environment.mock.ts，environmentName就自动变成了mock，完全不用手动重复设置。

方案2：自定义webpack注入环境标识（进阶） #

如果你的项目用了自定义webpack配置，可以借助webpack的DefinePlugin在构建时直接注入环境标识，连环境文件都不用改：

1. 在自定义webpack配置文件中添加插件：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      // 注入环境变量，值来自构建时的命令行参数
      'APP_ENV': JSON.stringify(process.env.APP_ENV)
    })
  ]
};

2. 构建时通过命令行传入环境标识：

APP_ENV=mock ng serve

3. 在Angular代码中直接使用：

// 直接获取注入的环境标识
console.log(APP_ENV); // 输出 'mock'

另外补充一下：isDevMode()本质是通过environment.production的值来判断的——当production为false时返回true，但这种判断逻辑覆盖不了mock这类自定义环境，所以上面的方案能更好地满足你区分多种环境的需求。

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