Angular多环境配置文件设置及Angular 5.2.9 API密钥配置问询

刚好我之前在Angular 5.x项目里踩过类似的配置坑，给你分享两种实用方案，看哪种更匹配你的需求：

方案一：用Angular CLI自带的环境配置（按环境构建） #

Angular CLI从早期版本就支持多环境构建配置，适合需要为每个环境单独构建的场景：

1. 新增环境配置文件
   在src/environments目录下创建对应环境的文件，比如预生产环境的environment.preprod.ts：

export const environment = {
  production: false,
  apiKey: '你的预生产API密钥',
  apiBaseUrl: 'https://preprod-api.example.com'
};

默认已经有environment.ts（开发）和environment.prod.ts（生产），你可以按需扩展。

2. 修改Angular CLI配置
   打开项目根目录的.angular-cli.json（Angular 5用的是这个配置文件，Angular 6+才改成angular.json），找到apps数组里的environments字段，添加新环境的映射：

"environments": {
  "dev": "environments/environment.ts",
  "prod": "environments/environment.prod.ts",
  "preprod": "environments/environment.preprod.ts"
}

3. 在代码中引用环境变量
   不用再硬编码API密钥到appSettings类里，直接导入环境变量即可：

import { environment } from '../environments/environment';

export class AppSettings {
  public static readonly API_KEY = environment.apiKey;
  public static readonly API_BASE_URL = environment.apiBaseUrl;
}

4. 按环境构建项目
   执行对应环境的构建命令，CLI会自动替换对应的环境配置：

• 开发环境：ng build
• 预生产环境：ng build --env=preprod
• 生产环境：ng build --env=prod --prod

方案二：动态加载外部配置文件（实现一次构建多环境部署） #

如果想只构建一次，部署到不同环境时仅修改配置文件，就需要动态加载外部JSON配置：

1. 创建外部配置文件
   在src/assets目录下新建config文件夹，里面放一个config.json（或者按环境分多个文件，部署时替换）：

{
  "apiKey": "当前环境的API密钥",
  "apiBaseUrl": "当前环境的API地址"
}

2. 编写配置加载服务
   创建config.service.ts来负责加载并提供配置：

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

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

  constructor(private http: HttpClient) {}

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

  // 获取API密钥
  getApiKey(): string {
    return this.configData?.apiKey || '';
  }

  // 获取API地址
  getApiBaseUrl(): string {
    return this.configData?.apiBaseUrl || '';
  }
}

3. 配置应用启动前加载配置
   修改app.module.ts，利用APP_INITIALIZER让应用启动前先加载配置：

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

// 定义加载配置的工厂函数
export function initConfig(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  imports: [HttpClientModule], // 别忘了导入HttpClientModule
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigService],
      multi: true
    }
  ],
  // ...其他模块配置
})
export class AppModule { }

4. 在代码中使用配置
   在组件或服务中注入ConfigService获取配置：

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

@Component({
  selector: 'app-root',
  template: `<p>当前API密钥：{{ apiKey }}</p>`
})
export class AppComponent {
  apiKey: string;

  constructor(private configService: ConfigService) {
    this.apiKey = configService.getApiKey();
  }
}

5. 构建与部署
   只需要执行一次生产构建：ng build --prod，得到dist文件夹。部署到不同环境时，只需要替换dist/assets/config/config.json为对应环境的配置文件，无需重新构建。

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