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互斥，但它有this method here，它似乎设置了引用的config / webpack.ENV.js文件OS环境变量。我觉得环境变量对于很多应用程序来说有点过于复杂，但它总比没有好。但是我如何在Angular-CLI术语中应用它，还是有更好的方法？

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

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

Answer 1

如果你真的必须构建一次并多次部署相同的构建工件，那么一个解决方案（虽然在我看来有点像黑客）是将你的外部配置放在＆＃39; assets＆＃39;然后从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

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

1 个答案: