Angular环境变量配置失败求助：两种尝试均未生效

问题1：环境变量${MYENV}未被解析 #

直接在environment.ts中写${MYENV}会被当作纯字符串处理，Angular不会自动解析shell环境变量到TypeScript文件中，导致URL出现编码后的无效字符。

解决步骤： #

1. 在package.json的scripts中添加带环境变量的构建命令：

   "scripts": {
     "build:test": "MYENV=test ng build --configuration test"
   }
   

2. 安装扩展webpack配置的依赖：

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

3. 项目根目录创建webpack.config.js，配置webpack的DefinePlugin传递环境变量：

   const webpack = require('webpack');
   module.exports = {
     plugins: [
       new webpack.DefinePlugin({
         'process.env.MYENV': JSON.stringify(process.env.MYENV)
       })
     ]
   };
   

4. 修改angular.json的构建配置，替换builder并指定自定义webpack文件：

   "build": {
     "builder": "@angular-builders/custom-webpack:browser",
     "options": {
       "customWebpackConfig": {
         "path": "./webpack.config.js"
       },
       // 保留原有其他配置
     }
   }
   

5. 在environment.ts中使用变量：

   export const environment = {
     production: false,
     API_URL: `http://myapp.api.${process.env.MYENV}.xx.test.xx.xx.xx/xx/xxxxxxx`
   };
   

执行npm run build:test即可完成变量解析。

问题2：environment.{env}.ts文件替换失败 #

核心原因是angular.json配置错误或构建命令使用不当。

解决步骤： #

1. 检查angular.json的build -> configurations配置，确保fileReplacements路径和环境匹配：

   "build": {
     "configurations": {
       "test": {
         "fileReplacements": [
           {
             "replace": "src/environments/environment.ts",
             "with": "src/environments/environment.test.ts"
           }
         ],
         "production": false
       }
     }
   }
   

   注意：路径要和实际文件位置完全一致，若environments在app目录下，需调整为src/app/environments/...。
2. 使用正确的构建命令：

   ng build --configuration test
   

   或在package.json中配置快捷脚本后执行npm run build:test：

   "scripts": {
     "build:test": "ng build --configuration test"
   }
   

3. 确认environment.test.ts的结构正确，示例：

   export const environment = {
     production: false,
     API_URL: "http://myapp.api.test.xx.test.xx.xx.xx/xx/xxxxxxx"
   };
   

4. 检查文件名和配置项的拼写，避免因大小写或路径错误导致替换失败。

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