最现代的外部化Angular 2环境配置方式？

Question

我很好奇2017年4月最现代的方式是使用外部配置构建一个Angular 2应用程序进行部署？

遵循Build Once Deploy Anywhere的理念,我想弄清楚如何将我的Angular 2应用程序打包为Docker镜像,我可以将其放到任何服务器上并从外部进行配置.

我已经使用此应用程序的大多数其他组件(包括Spring Boot后端)完成此操作,但是使用Angular 2执行此操作的最佳方法很难确定,因为在beta版本之间框架发展如此之大,以至于很多信息都是外的日期.

我有一个带有NPM的Angular 2.4.9,用于在Node Docker容器中运行的包管理,作为具有特定环境的JIT应用程序.在构建时将其烘焙到映像中.我想获得AoT编译的大小和速度优势以及最终的缩小和其他下载大小增强,但是AoT将environment.ts文件的内容直接烘焙到main.bundle.js中,所以根本没有办法之后改变它ng build

Angular2-webpack-starter项目看起来非常过时,并且与Angular-CLI 无关,但是这里有这个方法,它似乎设置了引用OS环境变量的config/webpack.ENV.js文件.我觉得环境变量对于很多应用程序来说有点过于复杂,但它总比没有好.但是我如何在Angular-CLI术语中应用它,还是有更好的方法？

据我所知,Angular-CLI过度抽取webpack来直接访问webpack和插件配置以遵循这种方法.但是我可以在我的环境中引用process.env.ts和Bob是你的叔叔还是比这更复杂？

我需要破解打开main.bundle.js之间改写位var environment = {和//# sourceMappingURL=environment.js.map？对于像Angular这样受欢迎的东西,这似乎是不必要的hacky.

Answer 1

如果你真的必须构建一次并多次部署相同的构建工件,那么一个解决方案(虽然在我看来有点像黑客)是将你的外部配置放在'assets'文件夹中然后从environment.ts进行ajax调用读取值:

SRC /环境/ environment.ts:

export const environment = new Promise((resolve, reject) => {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', './assets/environment.json');
  xhr.onload = function () {
    if (xhr.status === 200) {
      resolve(JSON.parse(xhr.responseText));
    }
    else {
      reject("Cannot load configuration...");
    }
  };
  xhr.send();
});

SRC /资产/ environment.json:

{
  "production": false,
  "some_api_url": "https://dev_url"
}

您还需要将模块引导推迟到ajax调用完成时:

SRC/main.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment as environmentPromise } from './environments/environment';

environmentPromise.then(environment => {

  if (environment["production"]) {
    enableProdMode();
  }

  platformBrowserDynamic().bootstrapModule(AppModule);
});

这里的工作示例: https ://github.com/mehradoo/angular-external-cfg/commit/0dd6122a0d8ff100c23458807cc379e9e24cc439