外部化Angular 2环境配置的最现代方法是什么？

Question

我很好奇截至2017年4月，构建Angular 2应用程序以进行外部配置的最现代方法是什么？遵循“构建一次，随处部署”的理念，我想弄清楚如何将我的Angular 2应用程序打包为Docker镜像，并将其放置在任何服务器上并从外部进行配置。

对于这个应用程序的大多数其他组件（包括Spring Boot后端），我已经做到了相当简单。但是，由于该框架在beta版本之间发生了巨大变化，因此很难确定使用Angular 2完成此操作的最佳方法，因为许多信息已过时。

我使用Node Docker容器中的Angular 2.4.9和NPM进行包管理作为JIT应用程序，并在构建时将特定的environment.ts烤入图像中。我想获得AoT编译的大小和速度优势，以及最终的缩小和其他下载大小增强功能，但是AoT会将environment.ts文件的内容直接烤入main.bundle.js中，因此在ng build之后无法更改它。

Angular2-webpack-starter项目似乎非常过时，并且与Angular-CLI互斥，但它有这个方法，似乎设置了引用操作系统环境变量的config/webpack.ENV.js文件。我觉得对于许多应用程序而言，环境变量有点过于复杂，但这总比什么都没有好。但是我该怎样在Angular-CLI术语中应用它？或者有更好的方法吗？

据我所知，Angular-CLI过于抽象了webpack，以至于无法直接访问webpack和插件配置以遵循这种方法。但是，我能否在我的environment.ts中引用process.env，就像掌声哥哥那样呢？还是说这比那更复杂？

我需要打开main.bundle.js，并重写var environment = {和//# sourceMappingURL=environment.js.map之间的内容吗？对于如此流行的Angular来说，这似乎有点不必要地hacky。

- Sloloem

---

结账 Angular Seed，它们支持 Docker。https://github.com/mgechev/angular-seed - Ahmed Musallam

Answer 1

如果您确实需要构建一次并多次部署相同的构建工件，那么一个解决方案（尽管我认为这有点取巧）是将外部配置放在“assets”文件夹中，然后从environment.ts发出ajax调用以读取值：

src/environments/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/assets/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

- Mehrad Sadegh