Angular中依据Angular-CLI构建配置设置全局常量的实现问题

方案1：使用Angular CLI原生fileReplacements配置（推荐） #

该方案为Angular官方推荐的多环境配置扩展方式，属于构建时静态替换，完全兼容TypeScript类型校验，不会出现动态导入路径识别失败的问题。
实现步骤：

• 整理多客户配置文件
  在项目src目录下新建profiles文件夹，每个客户对应独立子目录，存放专属常量配置：

// src/profiles/client-a/profile.constants.ts
export const PROFILE_CONSTANTS = {
  CUSTOMER_NAME : '客户A',
  API_BASE_URL: 'https://client-a-api.example.com',
  // 其他客户专属配置
}

// src/profiles/client-b/profile.constants.ts
export const PROFILE_CONSTANTS = {
  CUSTOMER_NAME : '客户B',
  API_BASE_URL: 'https://client-b-api.example.com',
  // 其他客户专属配置
}

同时新建一个默认的统一引用入口文件src/constants/profile.constants.ts，作为替换的基准文件：

// src/constants/profile.constants.ts  默认占位，构建时会被替换
export const PROFILE_CONSTANTS = {
  CUSTOMER_NAME : 'default',
  API_BASE_URL: '',
}

• 配置angular.json构建替换规则
  打开项目根目录的angular.json，找到projects > [你的项目名称] > architect > build > configurations节点，为每个客户新增专属构建配置：

{
  "configurations": {
    "client-a": {
      "fileReplacements": [
        {
          "replace": "src/constants/profile.constants.ts",
          "with": "src/profiles/client-a/profile.constants.ts"
        }
      ],
      "outputPath": "dist/client-a" // 可单独设置输出目录，区分不同客户的构建产物
    },
    "client-b": {
      "fileReplacements": [
        {
          "replace": "src/constants/profile.constants.ts",
          "with": "src/profiles/client-b/profile.constants.ts"
        }
      ],
      "outputPath": "dist/client-b"
    }
  }
}

• 业务代码统一引用
  所有业务代码直接导入基准入口文件即可，构建时Angular CLI会自动根据所选配置替换为对应客户的配置：

import { PROFILE_CONSTANTS } from 'src/constants/profile.constants.ts';

// 业务中直接使用常量
console.log(PROFILE_CONSTANTS.CUSTOMER_NAME);

• 兼容AngularJS/Angular混合架构
  你可以在Angular启动逻辑中，将常量直接注入到原AngularJS模块中，兼容老代码逻辑：

import { PROFILE_CONSTANTS } from 'src/constants/profile.constants.ts';
// 在混合升级模块初始化时注入老AngularJS常量
angular.module('our.module').constant('CLIENT_CONSTANTS', PROFILE_CONSTANTS);

• 执行构建
  打包对应客户版本时，指定构建配置即可：

# 打包客户A版本
ng build --configuration client-a
# 打包客户B版本
ng build --configuration client-b

方案2：使用HTML占位符替换（兼容原有脚本注入逻辑） #

如果要保留之前通过script标签注入常量的旧逻辑，可使用Angular CLI内置的HTML变量替换能力：

• 在src/index.html中保留脚本占位符：

<script src="%CLIENT_CONST_SCRIPT_PATH%"></script>

• 在angular.json对应客户的构建配置中添加替换规则：

"client-a": {
  "index": {
    "input": "src/index.html",
    "output": "index.html",
    "postprocess": [
      {
        "replace": "%CLIENT_CONST_SCRIPT_PATH%",
        "with": "assets/profiles/client-a/constants.js"
      }
    ]
  }
}

构建后占位符会被替换为对应客户的脚本路径，常量会挂载到全局window对象，直接在Angular和AngularJS代码中读取即可。

常见问题排查 #

• 如果导入常量提示类型不匹配，可先定义通用的常量接口，所有客户的配置文件都实现该接口即可避免TS校验错误。
• 文件替换失败时，检查fileReplacements中的路径是否为相对于项目根目录的完整路径，不要使用相对路径。
• 若需要将常量作为全局变量使用，可在对应客户的配置文件末尾添加window.PROFILE_CONSTANTS = PROFILE_CONSTANTS，同时将该文件添加到angular.json对应配置的scripts数组中即可。

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