如何让Angular 5应用从私有Cloud Foundry读取运行时环境变量

我来帮你解决Angular 5部署到私有Cloud Foundry（PCF）后动态读取用户提供环境变量的问题，之前我在类似场景里踩过坑，给你两个实用的落地方案：

这个方案适用于把Angular作为静态资源部署到PCF（用staticfile buildpack）的场景，核心是通过部署时替换静态配置文件的占位符来实现动态配置：

• 第一步：创建可替换的配置模板
  在Angular项目的assets/config目录下新建env.json模板文件：

{
  "apiEndpoint": "__API_ENDPOINT__"
}

• 第二步：编写配置服务加载动态配置
  创建config.service.ts来加载这个配置文件，确保应用启动时能拿到最新的API端点：

// src/app/services/config.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private configData: any;

  constructor(private http: HttpClient) {}

  // 加载配置，返回Promise确保应用启动前完成加载
  loadConfig(): Promise<any> {
    return this.http.get('/assets/config/env.json')
      .toPromise()
      .then(data => {
        this.configData = data;
      });
  }

  // 获取API端点
  getApiEndpoint(): string {
    return this.configData?.apiEndpoint;
  }
}

• 第三步：配置应用初始化钩子
  在app.module.ts里配置APP_INITIALIZER，让应用启动前先加载配置：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ConfigService } from './services/config.service';

// 初始化函数，调用配置服务的加载方法
export function initAppConfig(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  imports: [HttpClientModule], // 别忘导入HttpClientModule
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initAppConfig,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule { }

• 第四步：编写PCF启动脚本替换占位符
  在项目根目录创建start.sh脚本，用来替换env.json里的占位符并启动静态服务器：

#!/bin/bash
# 替换配置文件中的API端点占位符
sed -i "s/__API_ENDPOINT__/$API_ENDPOINT/g" dist/your-app-name/assets/config/env.json
# 启动静态服务器（根据staticfile buildpack的要求调整）
http-server dist/your-app-name -p $PORT

记得给脚本加执行权限：chmod +x start.sh

• 第五步：PCF部署与环境变量配置
  在PCF里设置环境变量：

cf set-env your-app-name API_ENDPOINT "https://your-private-api-domain.com"

或者在manifest.yml里配置：

applications:
- name: your-app-name
  buildpacks: [staticfile_buildpack]
  env:
    API_ENDPOINT: https://your-private-api-domain.com
  command: ./start.sh

如果你的Angular应用搭配了后端服务（比如Node.js、Java）部署在PCF，可以让后端读取PCF环境变量，再通过接口暴露给前端：

• 第一步：后端暴露配置接口
  以Node.js为例，编写一个简单的接口返回环境变量：

// server.js
const express = require('express');
const app = express();

// 暴露配置接口
app.get('/api/app-config', (req, res) => {
  res.json({
    apiEndpoint: process.env.API_ENDPOINT
  });
});

// 托管Angular静态文件
app.use(express.static('dist/your-app-name'));

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Server running on port ${port}`));

• 第二步：修改Angular配置服务
  把ConfigService的请求地址改成后端的配置接口即可，其他逻辑和方案1一致：

loadConfig(): Promise<any> {
  return this.http.get('/api/app-config')
    .toPromise()
    .then(data => {
      this.configData = data;
    });
}

• 第三步：部署后端到PCF并设置环境变量
  用对应的buildpack部署后端服务，同样通过cf set-env或manifest.yml设置API_ENDPOINT环境变量即可。

• 确保assets/config/env.json不会被Angular打包进main.js，要保留为独立静态文件（默认assets目录下的文件会被复制到dist文件夹）。
• Angular 5版本要确保正确导入HttpClientModule，避免请求失败。
• 方案1的start.sh要和代码一起push到PCF，确保部署时能执行。

内容的提问来源于stack exchange，提问作者Gowtham.K.Reddy