Question

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

{{1}}

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

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

2 个答案: