Angular 2 : How to handle app configuration for different environments

Question

以下场景:我构建了一个使用 REST API 的 Angular 应用程序(可以使用 Elixir 或 RoR 或其他任何工具构建)。在开发期间，我希望 Angular 使用与生产环境不同的 API(可能使用测试数据，可能是因为我同时构建 API 并且它在我的机器上运行)。

此外，我团队的其他成员可能想使用另一个本地 API 地址。这意味着这不应该进入版本控制系统。

因此，例如 api_base_url 对我来说可以是 http://localhost:4000，对我来说可以是 http://testapi.local同事和 http://api.example.com 用于生产。

api_base_url 值应该在多个组件中可用。

处理这个问题的好方法是什么？

Answer 1

您可以根据这些提示定义一个专门的提供程序。类似的东西:

bootstrap(AppComponent, [
  (...)
  provide('configuration', {
    useValue: {
      apiBaseUrl: 'http://localhost:4000'
    }
  }
]);

打包生产代码时，可以将包含此代码的文件替换为具有生产配置的文件。

要考虑到此配置，您可以扩展 RequestOptions 类，为您的所有请求添加 apiBaseUrl 前缀:

import {
  BaseRequestOptions, RequestOptions, RequestOptionsArgs
} from 'angular2/http';

export class AppRequestOptions extends BaseRequestOptions {
  constructor(private @Inject('configuration') configuration:any) {
  }

  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = this.configuration.apiBaseUrl + options.url;
    return super.merge(options);
  }
}

在引导您的应用程序时不要忘记配置请求选项:

bootstrap(AppComponent, [
  (...)
  provide('configuration', {
    useValue: {
      apiBaseUrl: 'http://localhost:4000'
    }
  }
  provide(RequestOptions, { useClass: AppRequestOptions })
]);

这个处理可以包含在一个专用的 JS 文件中，该文件将在构建中被替换(例如使用 gulp 和 gulp-html-replace)。

看到这个问题:

• How do I actually deploy an Angular 2 + Typescript + systemjs app?

对于最后一步，您还可以基于配置文件异步加载应用程序:

var injector = Injector.resolveAndCreate([HTTP_PROVIDERS]);
var http = injector.get(Http);

http.get('config.json').map(res => res.json())
  .subscribe(data => {
    bootstrap(AppComponent, [
      HTTP_PROVIDERS
      provide('config', { useValue: data })
    ]);
  });

有关详细信息，请参阅此问题:

• How to bootstrap an Angular 2 application asynchronously