外部化Angular 2环境配置的最现代方法? [英] Most modern way to externalize Angular 2 environment configuration?

问题描述

我很好奇，截至2017年4月，最现代的方式是构建Angular 2应用程序以通过外部配置进行部署吗?

I'm curious what the most modern way, as of April 2017, to build an Angular 2 app for deployment with external configuration?

遵循一旦构建即可部署任何地方"的理念，我想弄清楚如何将Angular 2应用程序打包为Docker映像，可以将其放置到任何服务器上并从外部进行配置.

Following the Build Once Deploy Anywhere philosophy I'd like to figure out how to package my Angular 2 app as a Docker image that I can drop onto any server and configure from outside.

我已经使用此应用程序的大多数其他组件(包括Spring Boot后端)完成了相当简单的工作，但是用Angular 2做到这一点的最佳方法很难确定，因为该框架在beta版本之间发展得如此之快，以至于的信息已过时.

I've done this fairly simple with most other components of this application including a Spring Boot backend, but the best way to do this with Angular 2 is hard to pin down since the framework evolved so massively between beta releases that a lot of information is out-of-date.

我已经有了带有NPM的Angular 2.4.9软件包管理功能，它作为具有特定环境的JIT应用程序在Node Docker容器中运行.我想获得AoT编译在大小和速度上的优势以及最终的缩小和其他下载大小的增强，但是AoT将environment.ts文件的内容直接烘焙到main.bundle.js中，因此根本无法实现在ng build

I've got Angular 2.4.9 with NPM for package management running in a Node Docker container as a JIT app with specific environment.ts baked into the image at build-time. I'd like to get the size and speed advantages of AoT compilation as well as eventual minification and other download size enhancements, but AoT bakes the contents of an environment.ts file directly into main.bundle.js so there's no way at all to change it after ng build

Angular2-webpack-starter项目似乎非常过时，并且无论如何都与Angular-CLI互斥，但是它已经

The Angular2-webpack-starter project seems very out-of-date and is mutually exclusive with Angular-CLI anyway, but it's got this method here which seems to setup config/webpack.ENV.js files that refer to OS environment variables. I feel like environment variables are a bit overly complicated for a lot of apps, but it's better than nothing. But how can I apply this in Angular-CLI terms, or is there a better way?

据我了解，Angular-CLI过于抽象化webpack，以至于无法直接访问webpack和插件配置来遵循这种方法.但是我可以只在我的环境中引用process.env.ts和鲍勃的叔叔吗，还是比这更复杂?

As I understand it Angular-CLI abstracts webpack too heavily to directly access the webpack and plugin configs to follow this approach. But could I just reference process.env in my environment.ts and Bob's your uncle or is it more complicated than that?

我是否需要打开main.bundle.js并重写var environment = {和//# sourceMappingURL=environment.js.map之间的位?对于像Angular这样流行的东西，这似乎毫无用处.

Do I need to crack open main.bundle.js and rewrite the bits between var environment = { and //# sourceMappingURL=environment.js.map? That seems needlessly hacky for something as popular as Angular.

推荐答案

如果您确实必须构建一次并多次部署相同的构建工件，则一种解决方案(尽管我认为这有点小技巧)是将您的"assets"文件夹中的外部配置，然后从environment.ts进行ajax调用以读取值:

If you really must build once and deploy the same build artifact multiple times then one solution (although in my opinion is a bit of a hack) is to put your external configuration inside 'assets' folder then make an ajax call from environment.ts to read the values:

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调用完成时:

You also need to postpone module bootstrapping to when ajax call is completed:

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环境配置的最现代方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！