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

Question

我正在开发一个角度应用程序,它是一个产品并部署到多个客户端.客户端将采用此角度应用程序并将其托管在其服务器中.因此,服务的网址对于客户来说会有所不同.我见过关于dev,prod的解决方案.但这不适用于这种情况.我正在寻找类似于.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

您可以做什么在资源文件夹中以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:修改模块提供者以添加此提供者:[...

  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时也使用它，我们在main.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的注释即可检查您自己项目中的估算值）。我怀疑从本地文件中获取任何项目都会占用太多时间。祝好运！