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

Question

以下场景：我搭建了一个Angular应用程序，它消费一个REST API（这个API可以用Elixir、RoR或其他语言编写）。在开发过程中，我想让Angular消费不同于生产环境的API（也许使用测试数据，也许因为我同时搭建了API并在我的机器上运行）。

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

例如，对于我来说，api_base_url可能是http://localhost:4000，对于我的同事来说，它可能是http://testapi.local，对于生产环境来说，它可能是http://api.example.com。

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

如何处理这个问题？

一个好的方法是什么？

- Ole Spaarmann

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等工具来替换构建过程中的文件。

参考此问题：

• 如何实际部署Angular 2 + Typescript + systemjs应用程序？

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

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 })
    ]);
  });

更多详情请参考以下问题：

• 如何异步引导 Angular 2 应用程序

- Thierry Templier

---

但这意味着我必须根据环境复制和粘贴正确的配置。如果每个环境都有一个配置文件，而且这些文件不在版本控制中，并且可以为每个团队成员单独设置，那么这将更加优雅。如果您想要自动流程和CI，那么在构建之前复制和粘贴似乎也不是一个好主意。 - Ole Spaarmann

这不会是手工复制/粘贴，而是集成到您的构建中（例如使用gulp和gulp-html-replace）。请参阅此问题：https://dev59.com/uloV5IYBdhLWcg3wauKP#36315060 - Thierry Templier

另一种方法是在加载配置文件后引导应用程序。我相应地更新了我的答案... - Thierry Templier

如果您正在使用Angular CLI并且只需要区分开发和生产环境，那么您可以使用内置的environment.ts和environment.prod.ts文件。其中一个文件将根据您使用的是ng build --dev还是ng build --prod命令注入到应用程序中。 - yannick1976

Answer 2

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

- Rozzy

---

这是一个不错的提示。虽然我正在使用Gulp，但是有类似的东西在这里。我只需要找出它是否与Angular 2兼容即可。 - Ole Spaarmann