如何在Angular 4中动态读取配置参数，无需重复部署应用？

当然可以解决这个痛点！针对Angular 4里需要动态加载配置、避免每次修改都重新部署的需求，我整理了几个实用的方案，你可以根据自己的部署场景选择：

这个方案的核心是把配置文件放在Angular构建包之外，应用启动时主动加载它，修改配置后直接生效，完全不用重新部署。

步骤如下：

1. 在你的项目根目录（不是src或assets里）创建一个config.json文件，写入需要动态配置的参数：

{
  "ip_address": "0.0.0.0",
  "api_base_url": "http://localhost:8080/api"
}

2. 创建一个配置服务来读取这个文件，比如src/app/services/app-config.service.ts：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class AppConfigService {
  private configData: any;

  constructor(private http: HttpClient) {}

  // 加载配置文件，返回Observable确保应用等待配置加载完成
  loadConfig(): Observable<any> {
    return this.http.get('/config.json')
      .map(response => {
        this.configData = response;
        return response;
      });
  }

  // 根据key获取配置值
  getConfig(key: string): any {
    return this.configData?.[key];
  }
}

3. 在app.module.ts中配置APP_INITIALIZER，确保配置在应用启动前加载完成：

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

// 初始化函数，触发配置加载
export function initAppConfig(appConfigService: AppConfigService) {
  return () => appConfigService.loadConfig();
}

@NgModule({
  imports: [HttpClientModule],
  providers: [
    AppConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initAppConfig,
      deps: [AppConfigService],
      multi: true
    }
  ]
})
export class AppModule { }

4. 部署时，把config.json和Angular构建生成的dist文件夹放在同一目录下。之后要修改IP或其他参数，直接编辑这个JSON文件就行，刷新应用就会生效。

注意：如果你的应用部署在子路径下，需要调整http.get的路径，比如/my-app/config.json，确保能正确访问到配置文件

如果你的Angular应用是通过Node.js服务器（比如Express）或者Docker容器部署的，可以把配置参数作为系统环境变量，在服务器启动时注入到应用中。

示例（Express服务器）： #

1. 编写一个简单的Express服务器server.js，把环境变量注入到页面的全局对象：

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  // 从环境变量读取配置，没有则用默认值
  const appConfig = {
    ip_address: process.env.APP_IP || '0.0.0.0',
    api_port: process.env.API_PORT || 8080
  };

  // 返回Angular的入口页面，同时注入全局配置
  res.send(`
    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>My Angular App</title>
    </head>
    <body>
      <!-- 注入全局配置对象 -->
      <script>window.appConfig = ${JSON.stringify(appConfig)};</script>
      <app-root></app-root>
      <script src="runtime.js"></script>
      <script src="polyfills.js"></script>
      <script src="styles.js"></script>
      <script src="vendor.js"></script>
      <script src="main.js"></script>
    </body>
    </html>
  `);
});

// 托管Angular构建文件
app.use(express.static('dist'));

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

2. 在Angular中创建服务读取全局变量：

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

@Injectable()
export class EnvConfigService {
  get ipAddress(): string {
    // 读取全局对象中的配置
    return (window as any).appConfig?.ip_address;
  }

  get apiPort(): number {
    return (window as any).appConfig?.api_port;
  }
}

3. 启动服务器时设置环境变量即可：

# Linux/macOS
APP_IP=192.168.1.100 API_PORT=9090 node server.js

# Windows（PowerShell）
$env:APP_IP="192.168.1.100"; $env:API_PORT="9090"; node server.js

如果是Docker部署，可以在docker run时用-e参数传递环境变量，非常方便。

如果你的需求是针对几个固定的部署环境（比如开发、测试、生产），可以用Angular CLI的环境文件结合构建参数，但这个方案需要重新构建应用，不过可以避免手动修改配置：

1. 在src/environments目录下创建environment.prod.ts、environment.staging.ts等文件：

// environment.staging.ts
export const environment = {
  production: false,
  ip_address: '10.0.0.5',
  api_url: 'http://staging-api.example.com'
};

2. 构建时指定环境：

ng build --prod --env=staging

不过这个方案不符合你"完全不用重新部署"的核心需求，更适合预定义好的多环境场景，所以优先推荐前两个方案。

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