Angular5：将 Angular 应用程序部署到多个客户端

Question

我正在开发一个 Angular 应用程序，它是一种产品并部署到多个客户端。客户将采用这个 Angular 应用程序并将其托管在他们的服务器中。因此，服务的 url 对于客户端会有所不同。我见过谈论开发，产品的解决方案。但这不适用于这种情况。我正在寻找一个类似于 .net 配置文件的配置文件。我创建了一个单独的 app.config.ts 文件，但是在我构建时会构建它。我正在寻找一种解决方案，我可以将应用程序部署到任何客户端，而无需他们再次构建它。

import { InjectionToken } from "@angular/core";

export let APP_CONFIG = new InjectionToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;
}

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://88.87.86.999/"
};

Answer 1

你可以做什么它在assets文件夹中以json格式托管配置文件并动态检索它。您需要确保在应用程序启动之前检索它，这样它就可以在需要时在组件/服务中使用。为此，您可以使用 APP_INITIALIZER 令牌

步骤#1：将你的json配置文件放在src/assets/config/conf.json下（json格式，不是ts格式，因为prod模式下没有TS编译器）

第 2 步：添加新的配置服务

import {Inject, Injectable} from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from 'rxjs/Rx';
import {environment} from "../../environments/environment";

/**
 * Declaration of config class
 */
export class AppConfig
{
//Your properties here
  readonly apiEndpoint: string;
}

/**
 * Global variable containing actual config to use. Initialised via ajax call
 */
export let APP_CONFIG: AppConfig;

/**
 * Service in charge of dynamically initialising configuration
 */
@Injectable()
export class AppConfigService
{

  constructor(private http: HttpClient)
  {
  }

  public load()
  {
    return new Promise((resolve, reject) => {

      this.http.get('/assets/config/config.json').catch((error: any): any => {
        reject(true);
        return Observable.throw('Server error');
      }).subscribe((envResponse :any) => {
        let t = new AppConfig();
        //Modify envResponse here if needed (e.g. to ajust parameters for https,...)
        APP_CONFIG = Object.assign(t, envResponse);
        resolve(true);
      });

    });
  }
}

第 3 步：在您的主模块中，在声明模块之前添加此内容

/**
* Exported function so that it works with AOT
* @param {AppConfigService} configService
* @returns {Function}
*/
export function loadConfigService(configService: AppConfigService): Function 

{
  return () => { return configService.load() }; 
}

步骤#4：修改模块提供程序以添加此

providers: [
  …

  AppConfigService,
  { provide: APP_INITIALIZER, useFactory: loadConfigService , deps: [AppConfigService], multi: true },


],

第 5 步：在您的代码中，使用配置

import {APP_CONFIG} from "../services/app-config.service";

//…
return APP_CONFIG.configXXX;

现在，您可以将应用发送给多个客户；每个客户端只需要在 conf.json 文件中有他们的特定参数

Answer 2

为了使配置在初始时加载并在引导 AppModule 时使用它，我们在 ma​​in.ts 中使用了这个简单的解决方案。

注意我们排队

platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

在等待获取配置文件的异步函数中。

(async () => {

  // console.time()
  const response = await fetch('./assets/config/conf.json');
  const json = await response.json();
  Object.entries(json).forEach(([key, value]) => {
    environment[key] = value;
  });
  // console.timeEnd()

  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));

})();

配置文件位于资产中，并相应地被部署作业替换。

意味着我们有基于环境的配置：

• config.json
• config.qa.json
• config.prod.json

我们的获取时间大约需要 40 毫秒（几乎不需要。取消注释 console.time 以检查您自己项目中的估计值）。我怀疑它会在任何项目上消耗太多时间，因为它是从本地文件中获取的。祝你好运！