如何在Angular 18中读取Kubernetes ConfigMap的配置值

下面提供两种实用方案，适配你当前的K8s ConfigMap挂载场景：

方法一：直接读取挂载的配置文件 #

1. 调整K8s挂载路径 #

将ConfigMap挂载到Angular应用的静态资源目录（比如assets/config），确保前端能通过HTTP请求访问到配置文件。修改Deployment的volume配置：

volumeMounts:
  - name: app-config
    mountPath: /usr/share/nginx/html/assets/config  # 容器内Angular静态资源路径，根据你的镜像调整
    readOnly: true
volumes:
  - name: app-config
    configMap:
      name: your-configmap-name  # 替换为你的ConfigMap名称
      items:
        - key: AppEnvNamePrefix
          path: AppEnvNamePrefix
        - key: CacheExpiry
          path: CacheExpiry
        - key: ApiBaseUrl
          path: ApiBaseUrl

2. 创建配置服务 #

新建src/app/config.service.ts，封装配置加载和读取逻辑：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private configStore: Record<string, string> = {};

  constructor(private http: HttpClient) {}

  loadConfig(): Observable<Record<string, string>> {
    const configKeys = ['AppEnvNamePrefix', 'CacheExpiry', 'ApiBaseUrl'];
    const requestList = configKeys.map(key => 
      this.http.get(`assets/config/${key}`, { responseType: 'text' })
    );

    return new Observable(observer => {
      forkJoin(requestList).subscribe(values => {
        configKeys.forEach((key, index) => {
          this.configStore[key] = values[index].trim();
        });
        observer.next(this.configStore);
        observer.complete();
      });
    });
  }

  getConfig(key: string): string {
    return this.configStore[key] || '';
  }
}

3. 启动前预加载配置 #

在main.ts中配置APP_INITIALIZER，确保应用启动时先加载完所有配置：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { provideHttpClient } from '@angular/common/http';
import { APP_INITIALIZER } from '@angular/core';
import { ConfigService } from './app/config.service';

function initConfig(configService: ConfigService) {
  return () => configService.loadConfig().toPromise();
}

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigService],
      multi: true
    }
  ]
});

4. 组件中使用配置 #

在任意组件中注入ConfigService获取值：

import { Component } from '@angular/core';
import { ConfigService } from './config.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true
})
export class AppComponent {
  apiBaseUrl = this.configService.getConfig('ApiBaseUrl');
  cacheExpiry = this.configService.getConfig('CacheExpiry');

  constructor(private configService: ConfigService) {}
}

方法二：通过环境变量注入配置 #

这种方式更适合需要动态调整配置的场景，无需修改前端代码结构。

1. K8s中配置环境变量 #

修改Deployment，从ConfigMap读取值作为容器环境变量：

env:
  - name: APP_ENV_NAME_PREFIX
    valueFrom:
      configMapKeyRef:
        name: your-configmap-name
        key: AppEnvNamePrefix
  - name: CACHE_EXPIRY
    valueFrom:
      configMapKeyRef:
        name: your-configmap-name
        key: CacheExpiry
  - name: API_BASE_URL
    valueFrom:
      configMapKeyRef:
        name: your-configmap-name
        key: ApiBaseUrl

2. 编写容器启动脚本 #

创建start.sh脚本，将环境变量写入前端可访问的JS文件：

#!/bin/sh

# 生成环境变量配置文件
cat > /usr/share/nginx/html/assets/config/env.js <<EOF
window.env = {
  AppEnvNamePrefix: "$APP_ENV_NAME_PREFIX",
  CacheExpiry: "$CACHE_EXPIRY",
  ApiBaseUrl: "$API_BASE_URL"
};
EOF

# 启动Nginx
nginx -g 'daemon off;'

在Dockerfile中添加脚本执行权限：

COPY start.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/start.sh
CMD ["start.sh"]

3. 引入配置文件 #

在index.html的<head>中添加脚本引入：

<script src="assets/config/env.js"></script>

4. 添加TS类型定义 #

新建src/env.d.ts，避免TypeScript报错：

declare global {
  interface Window {
    env: {
      AppEnvNamePrefix: string;
      CacheExpiry: string;
      ApiBaseUrl: string;
    };
  }
}

export {};

5. 组件中直接使用 #

无需额外服务，直接访问window.env获取配置：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: true
})
export class AppComponent {
  apiBaseUrl = window.env.ApiBaseUrl;
  envPrefix = window.env.AppEnvNamePrefix;
}

注意事项 #

• 确保angular.json的assets配置包含assets/config目录，避免构建时忽略：

  "assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "src/assets/config",
      "output": "/assets/config/"
    }
  ]
  

• 生产环境建议给ConfigMap挂载路径添加readOnly: true，防止意外修改。

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