Angular加载配置文件

        在很多项目中，需要程序在启动时加载配置文件，根据配置参数运行程序。Angular单页应用中，可以在初始化方法（APP_INITIALIZER）中完成这一操作。

1、添加配置文件

        项目的配置文件一般都存放在静态目录中，可以在assets文件夹下新建一个config文件夹用于存放配置文件。可以为调试环境和部署环境分别保存配置文件。

2、添加service读取配置文件

        serve文件 app/core/services/config.service ：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ConfigService {

  constructor(private http: HttpClient) { }
  /**
   * 接口地址
   */
  static API_HOST: string;
  /**
   * 默认用户ID
   */
  static DEFAULT_USER_ID: string;
  /**
   * 读取配置文件
   */
  load() {
    const jsonFile = `assets/config/config.${environment.name}.json`;
    return new Promise<void>((resolve, reject) => {
      this.http.get<any>(jsonFile).subscribe(d => {
        ConfigService.API_HOST = d.apiHost;
        ConfigService.DEFAULT_USER_ID = d.defaultUserId;
        resolve();
      }, err => {
        reject(`load config error: ${err}`);
      })
    });
  }
}

export function loadConfig(appConfig: ConfigService) {
  return () => appConfig.load();
}

        以上代码中 const jsonFile = `assets/config/config.${environment.name}.json`; 根据程序运行环境加载不同的json文件，需要修改 environment 文件添加 name 字段。

        修改 src/environments/environment.ts ：

export const environment = {
  name: "dev",
  production: false
};

        修改 src/environments/environment.prod.ts ：

export const environment = {
  name: "prod",
  production: true
};

3、配置APP_INITIALIZER

        修改 app.module.ts，在 providers 中配置 APP_INITIALIZER，设置程序初始化的时候先执行加载配置的方法：

import { HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ConfigService, loadConfig } from './core/services/config.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [{ provide: APP_INITIALIZER, useFactory: loadConfig, deps: [ConfigService], multi: true }],
  bootstrap: [AppComponent]
})
export class AppModule { }

        完成以上步骤，程序启动时就能正确的加载配置文件。如以上示例，在项目别的页面ts文件中就可以直接使用 ConfigService.API_HOST 和 ConfigService.DEFAULT_USER_ID 了。