Angular应用运行时读取环境变量及容器化动态加载环境配置文件的方案咨询

刚好我前阵子在做Angular通用lib+多应用容器化的时候，碰到了几乎一模一样的场景——共用一个发布成npm包的通用lib，多个独立应用依赖它，还要用同一个镜像适配不同环境的配置。折腾了好几种方案，最终落地了两个比较稳定的，分享给你参考：

方案1：静态配置文件+运行时替换（最常用，适配大部分场景） #

这个思路核心是把环境配置从build时注入改成运行时从静态文件读取，然后通过Docker启动脚本动态替换配置内容，实现一个镜像跑多环境。

步骤1：改造Angular应用的配置加载逻辑 #

首先在你的app_1项目里，把硬编码的环境配置改成动态加载：

• 在app_1/assets目录下新建一个env.json模板文件，把所有需要动态调整的配置项用占位符代替，比如：

{
  "apiBaseUrl": "{{API_BASE_URL}}",
  "envLabel": "{{ENV_LABEL}}",
  "libServiceUrl": "{{LIB_SERVICE_URL}}"
}

• 写一个专门的环境配置服务EnvService，用来在应用初始化时加载这个文件：

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

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

  constructor(private http: HttpClient) {}

  loadConfig(): Observable<Record<string, any>> {
    return this.http.get<Record<string, any>>('/assets/env.json').pipe(
      tap(config => {
        this.config = config;
        // 可选：挂载到window对象，方便lib里直接读取
        (window as any).__APP_ENV = config;
      })
    );
  }

  get(key: string): any {
    return this.config[key];
  }
}

• 最后修改main.ts，确保应用在bootstrap前先加载好配置：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { EnvService } from './app/services/env.service';
import { Injector } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

// 先创建注入器加载配置服务
const injector = Injector.create({
  providers: [EnvService, { provide: HttpClientModule, useValue: HttpClientModule }]
});
const envService = injector.get(EnvService);

// 加载配置完成后再启动应用
envService.loadConfig().subscribe({
  next: () => {
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error('应用启动失败：', err));
  },
  error: (err) => console.error('加载环境配置失败：', err)
});

步骤2：配置Docker镜像，实现运行时替换 #

用Nginx作为Angular静态应用的运行容器，同时加一个启动脚本处理配置替换：

• 编写Dockerfile：

# 构建阶段：编译Angular应用
FROM node:18-alpine as builder
WORKDIR /build
# 复制app1的依赖文件
COPY app_1/package*.json ./
RUN npm ci --only=production
# 复制app1源码并构建
COPY app_1/ .
# 用生产环境基础配置构建，运行时会覆盖
RUN npm run build -- --configuration production

# 运行阶段：用Nginx托管静态文件
FROM nginx:alpine
# 复制编译好的dist文件
COPY --from=builder /build/dist /usr/share/nginx/html
# 复制自定义Nginx配置（解决Angular路由刷新404问题）
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 复制env.json模板到容器内
COPY app_1/assets/env.json /usr/share/nginx/html/assets/env.json
# 复制启动脚本
COPY entrypoint.sh /entrypoint.sh
# 给脚本加执行权限
RUN chmod +x /entrypoint.sh

# 用启动脚本作为入口
ENTRYPOINT ["/entrypoint.sh"]
# 默认启动Nginx
CMD ["nginx", "-g", "daemon off;"]

• 编写entrypoint.sh启动脚本，用环境变量替换模板里的占位符：

#!/bin/sh

# 替换env.json里的占位符，没有传环境变量就用默认值
sed -i "s|{{API_BASE_URL}}|${API_BASE_URL:-https://default-api.example.com}|g" /usr/share/nginx/html/assets/env.json
sed -i "s|{{ENV_LABEL}}|${ENV_LABEL:-production}|g" /usr/share/nginx/html/assets/env.json
sed -i "s|{{LIB_SERVICE_URL}}|${LIB_SERVICE_URL:-https://default-lib-api.example.com}|g" /usr/share/nginx/html/assets/env.json

# 执行原CMD命令（启动Nginx）
exec "$@"

• 部署的时候，只需要给Pod传入对应环境的环境变量就行，比如K8s的Deployment配置片段：

spec:
  containers:
  - name: app1
    image: your-registry/app1:v1.0.0
    ports:
    - containerPort: 80
    env:
    - name: API_BASE_URL
      value: "https://staging-api.yourdomain.com"
    - name: ENV_LABEL
      value: "staging"
    - name: LIB_SERVICE_URL
      value: "https://staging-lib.yourdomain.com"

方案2：直接读取容器环境变量（适合配置项少的场景） #

如果你的配置项不多，也可以不用静态文件，直接让Angular应用读取容器的环境变量。不过要注意，浏览器环境不能直接读取容器的环境变量，得通过Nginx把环境变量注入到页面里：

具体步骤 #

1. 在Nginx的配置文件里，把环境变量注入到index.html的<head>标签里：

server {
  listen 80;
  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  # 在返回index.html时注入环境变量
  sub_filter '<head>' '<head><script>window.__APP_ENV = { API_URL: "$API_URL", ENV_NAME: "$ENV_NAME" };</script>';
  sub_filter_once on;
}

2. 修改Dockerfile，把Nginx配置里用到的环境变量传进去，同时启动Nginx：

FROM nginx:alpine
COPY --from=builder /build/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 直接用Nginx启动，环境变量会被sub_filter替换
CMD ["nginx", "-g", "daemon off;"]

3. 部署的时候传入环境变量，Nginx会自动把变量注入到页面里，Angular应用直接从window.__APP_ENV读取即可。

针对你的Lib包的适配建议 #

因为你的lib是发布成npm包被app1依赖的，所以lib里不要硬编码任何环境相关的配置，最好通过两种方式获取配置：

• 让lib的服务直接读取window.__APP_ENV（如果用了方案1或2的全局挂载）；
• 在app1初始化时，把配置通过依赖注入的方式传给lib的服务，比如：

// app1的AppModule里
import { NgModule } from '@angular/core';
import { LibModule, LIB_CONFIG } from 'your-lib-package';

@NgModule({
  imports: [LibModule],
  providers: [
    {
      provide: LIB_CONFIG,
      useValue: window.__APP_ENV.libConfig
    }
  ]
})
export class AppModule {}

这样lib就能通过注入LIB_CONFIG令牌获取到动态配置了。

踩坑提醒 #

• 用sed替换配置时，如果环境变量里有特殊字符（比如/、&），要换一个sed的分隔符，比如用#代替/，避免匹配错误；
• Angular构建时不要开启--output-hashing=all导致静态文件名称变化，或者确保env.json的路径不受哈希影响；
• 一定要在应用启动前加载配置，不然会出现配置未就绪导致的空指针错误。

内容来源于stack exchange