如何检测Angular 16中当前运行的配置环境？

在Angular 16中，默认不再自动生成带production属性的环境文件，要直接获取当前使用的配置名称（如development/production/staging），可以用以下两种实用方案：

方法一：环境文件 + 构建配置替换（推荐） #

这种方式贴合Angular CLI原生的环境文件机制，实现简单：

1. 生成环境文件脚手架（如果还没有）：

   ng generate environments
   

2. 在每个环境文件中添加configName字段，明确标记当前配置：
   • src/environments/environment.ts（默认开发环境）：

     export const environment = {
       configName: 'development'
     };
     

   • src/environments/environment.prod.ts（生产环境）：

     export const environment = {
       configName: 'production'
     };
     

   • 自定义配置（如staging）：新建src/environments/environment.staging.ts，添加configName: 'staging'
3. 配置angular.json的fileReplacements，确保每个构建配置对应正确的环境文件：
   以production和staging配置为例：

   "configurations": {
     "production": {
       "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.prod.ts"
         }
       ],
       // 其他原有配置
     },
     "staging": {
       "fileReplacements": [
         {
           "replace": "src/environments/environment.ts",
           "with": "src/environments/environment.staging.ts"
         }
       ],
       "extends": "development"
     }
   }
   

4. 在项目代码中直接导入使用：

   import { environment } from '../environments/environment';
   
   // 获取当前配置名称
   console.log('当前运行配置:', environment.configName);
   

方法二：Webpack DefinePlugin 注入配置名称 #

如果不想维护多个环境文件，可以通过自定义Webpack配置注入配置名称：

1. 安装自定义Webpack构建依赖：

   npm install @angular-builders/custom-webpack --save-dev
   

2. 修改angular.json的构建器为自定义Webpack版本：

   "architect": {
     "build": {
       "builder": "@angular-builders/custom-webpack:browser",
       "options": {
         "customWebpackConfig": {
           "path": "./webpack.config.js"
         },
         // 原有配置
       }
     },
     "serve": {
       "builder": "@angular-builders/custom-webpack:dev-server",
       // 原有配置
     }
   }
   

3. 新建项目根目录的webpack.config.js，注入配置名称：

   const webpack = require('webpack');
   
   module.exports = (config, options) => {
     // options.configuration即为传入的--configuration参数值，默认development
     const currentConfig = options.configuration || 'development';
     config.plugins.push(
       new webpack.DefinePlugin({
         'APP_CONFIG_NAME': JSON.stringify(currentConfig)
       })
     );
     return config;
   };
   

4. 声明全局变量并使用：
   新建src/typings.d.ts添加变量声明：

   declare const APP_CONFIG_NAME: string;
   

   在代码中直接调用：

   console.log('当前运行配置:', APP_CONFIG_NAME);
   

方案对比 #

• 方法一：简单直观，和Angular CLI原生机制兼容，适合大多数场景；
• 方法二：无需维护多份环境文件，灵活性更高，但需要额外配置Webpack。

内容的提问来源于stack exchange，提问作者Christian Vincenzo Traina