Angular v12+OCP4环境变量未定义：测试/预发/生产配置映射问题

你遇到的核心问题是：Angular作为前端应用，编译后运行在浏览器环境中，无法直接访问Node.js的process.env对象——而你用的dotenv方案是在编译阶段注入变量，OpenShift的配置映射变量是运行时才设置的，所以编译时这些变量还不存在，导致最终值为undefined（后端是Node.js运行时，所以能正常读取）。

以下是几个可快速落地的临时修复方案：

方案1：运行时注入全局变量到index.html #

这是最直接的方式，通过部署脚本将OpenShift环境变量替换到index.html的全局变量中：

1. 在src/index.html的<head>中添加全局变量占位符：

   <script>
     window.appEnv = {
       API_BASE_URL: '%%API_BASE_URL%%',
       AUTH_DOMAIN: '%%AUTH_DOMAIN%%'
     };
   </script>
   

2. 在OpenShift的部署流程中添加启动脚本（比如Dockerfile的CMD或部署钩子），用sed替换占位符为实际环境变量：

   # 假设静态文件目录是/usr/share/nginx/html
   sed -i "s/%%API_BASE_URL%%/$API_BASE_URL/g" /usr/share/nginx/html/index.html
   sed -i "s/%%AUTH_DOMAIN%%/$AUTH_DOMAIN/g" /usr/share/nginx/html/index.html
   

3. 在Angular代码中直接访问全局变量：

   const apiUrl = (window as any).appEnv.API_BASE_URL;
   

方案2：Nginx反向代理动态替换（适合用Nginx部署的场景） #

如果你的Angular应用用Nginx托管，可以利用Nginx的sub_filter模块在请求响应时动态替换变量：

1. 同样在src/index.html中添加占位符（和方案1一致）；
2. 修改Nginx配置文件，开启sub_filter：

   server {
     listen 80;
     root /usr/share/nginx/html;
     index index.html;
   
     location / {
       try_files $uri $uri/ /index.html;
       # 替换占位符为环境变量
       sub_filter '%%API_BASE_URL%%' '$API_BASE_URL';
       sub_filter '%%AUTH_DOMAIN%%' '$AUTH_DOMAIN';
       # 确保所有匹配都被替换
       sub_filter_once off;
     }
   }
   

3. 确保OpenShift部署时将环境变量传递给Nginx容器，Nginx会自动在响应时替换变量。

方案3：静态JSON文件+启动脚本替换 #

通过加载静态JSON文件的方式获取环境变量，适合需要结构化配置的场景：

1. 在src/assets下创建env.template.json模板文件：

   {
     "apiUrl": "%%API_URL%%",
     "timeout": "%%TIMEOUT%%"
   }
   

2. 修改angular.json，确保模板文件被复制到编译后的dist目录：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     "src/assets/env.template.json"
   ]
   

3. 部署脚本中将模板文件复制为env.json并替换占位符：

   cp /usr/share/nginx/html/assets/env.template.json /usr/share/nginx/html/assets/env.json
   sed -i "s/%%API_URL%%/$API_URL/g" /usr/share/nginx/html/assets/env.json
   sed -i "s/%%TIMEOUT%%/$TIMEOUT/g" /usr/share/nginx/html/assets/env.json
   

4. 创建一个环境变量服务加载JSON文件：

   import { HttpClient } from '@angular/common/http';
   import { Injectable } from '@angular/core';
   import { APP_INITIALIZER } from '@angular/core';
   
   @Injectable({ providedIn: 'root' })
   export class EnvService {
     config: any;
   
     constructor(private http: HttpClient) {}
   
     loadConfig() {
       return this.http.get('/assets/env.json').toPromise().then(data => {
         this.config = data;
       });
     }
   }
   
   // 在app.module.ts中配置APP_INITIALIZER，确保启动前加载完成
   export function initEnv(envService: EnvService) {
     return () => envService.loadConfig();
   }
   
   @NgModule({
     providers: [
       EnvService,
       {
         provide: APP_INITIALIZER,
         useFactory: initEnv,
         deps: [EnvService],
         multi: true
       }
     ]
   })
   export class AppModule {}
   

5. 在组件/服务中注入EnvService使用配置：

   constructor(private envService: EnvService) {
     console.log(this.envService.config.apiUrl);
   }
   

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