azure - 带转换的 Angular2 配置数据

Question

我正在创建一个将使用 webApi 的 Angular2 应用程序。处理配置数据的最佳实践是什么？我想要一种在部署到不同环境时进行转换的方法。

在本地工作时，webApi 将是本地的，例如:http://localhost:64551/Api/person .

在开发中它将是: http://devServer.com/Api/person

产品将是: http://prodServer.com/Api/person

我无法对服务器名称进行硬编码。我在配置中需要它，但当我们部署到不同的环境时它会发生变化。

这是我使用 Visual Studio 在 ASP.net 5 项目中构建的 Anglar2 项目。WebApi 是一个 ASP.net 5 项目。我将在 Azure 上托管。

过去，我使用过 web.config 转换，但这不是 Angular 应用程序的选项。

有什么建议吗？

Answer 1

这可以通过使用 API 请求在 Angular 应用程序引导期间检索配置来解决。我个人认为 Angular 应该采取这种方法，因为要求开发人员为每个环境进行构建并不是最好的解决方案。

使用 Assets 中的配置文件:

像这样创建不同的配置文件夹/文件

• /assets/configurations/develop/configuration.json
• /assets/configurations/product/configuration.json

使用正确的值填充这些 configuration.json 文件。

{
  "production": false,
  "api": "https://dev.myapi.domain.com"
}

创建一个代表您的配置的界面

export interface InitConfiguration {
  production: boolean;
  api: string;
}

更新您的 angular.json(或workspace.json 或project.json)文件，以便服务将使用正确的文件。此示例使用一个共享库来存储资源并将其拉入。确保将 glob 应用于每个环境，下面仅显示 dev。

"targets": {
    "build": {
      "configurations": {
        "dev": {
          "assets": [
            {
              "glob": "**/*",
              "input": "./libs/shared/assets/",
              "output": "./assets"
            },
            {
              "glob": "configuration.json",
              "input": "./libs/shared/assets/configurations/develop",
              "output": "./assets/configurations"
            }
            ...

这会将 Assets 移动到服务将用于检索 json 的位置。

创建一个利用 XMLHttpRequest 的配置服务(无法注入(inject) http，因为它需要在 Angular 引导之前运行)。请注意 get 请求如何访问 asset/configuration/configuration.json 文件。

import { Injectable } from '@angular/core';
import { InitConfiguration } from './init-configuration';

/**
 * Service that provides configuration information from assets
 * Assets folder contains \{env}\configuration.json file that matches environment
 */
// @dynamic
@Injectable({ providedIn: 'root' })
export class InitConfigurationService<
  T extends InitConfiguration = InitConfiguration
  > {
  private static _configuration: InitConfiguration | undefined = undefined;
  static production = false;

  static loadConfig(): Promise<void> {
    return new Promise((resolve, reject) => {
      const req = new XMLHttpRequest();
      req.addEventListener('load', () => {
        if (req.status === 200) {
          try {
            InitConfigurationService._configuration = JSON.parse(
              req.responseText
            );
            this.production =
              InitConfigurationService._configuration?.production || false;
          } catch (e) {
            reject(e);
          }
          resolve();
        } else {
          reject(req.statusText);
        }
      });
      req.open('GET', '/assets/configurations/configuration.json');
      req.send();
    });
  }

  getConfiguration(): T {
    if (!InitConfigurationService._configuration) {
      throw new ReferenceError(
        `Attempting to access configuration before it is set.
         Possible Solutions:
          1. Bootstrap the loadConfig method into your applications main.ts
          InitConfigurationService.loadConfig().then(
            () => {
              return platformBrowserDynamic()
                .bootstrapModule(AppModule)
                .catch((err) => console.error(err));
            }
          )
        `
      );
    }
    return InitConfigurationService._configuration as T;
  }

  get production(): boolean {
    return InitConfigurationService.production;
  }

  get api(): string {
    return this.getConfiguration().api || '';
  }
}

最后引导服务在调用 bootstrapModule 之前运行 loadConfig()

InitConfigurationService.loadConfig().then(async () => {
  if (InitConfigurationService.production) {
    enableProdMode();
  }
  try {
    return platformBrowserDynamic().bootstrapModule(AppModule);
  } catch (err) {
    return console.error(err);
  }
});

这些步骤支持使用不同的服务配置来提供不同的环境。当您进行部署时，您将需要手动移动文件。这就像在 CD 中引入与此类似的步骤一样简单。

copy my-angular-app\assets\configurations\develop\configuration.json my-angular-app\assets\configurations\configuration.json /Y