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。

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

处理此事的好方法是什么？

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

Answer 2

也许你应该尝试Grunt。示例：http://mindthecode.com/how-to-use-environment-variables-in-your-angular-application/

Angular 2：如何处理不同环境的应用配置

2 个答案: