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

Posted 2023-03-06

【中文标题】将 Angular 2 环境配置外部化的最现代方式？

【英文标题】：Most modern way to externalize Angular 2 environment configuration?

【发布时间】：2017-08-31 06:22:21

【问题描述】：

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

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

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

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

Angular2-webpack-starter 项目似乎非常过时，并且无论如何与 Angular-CLI 互斥，但它有 this method here 似乎设置了引用操作系统环境的 config/webpack.ENV.js 文件变量。我觉得环境变量对于很多应用程序来说有点过于复杂，但总比没有好。但是我如何在 Angular-CLI 术语中应用它，或者有更好的方法吗？

据我了解，Angular-CLI 对 webpack 的抽象过于繁重，无法直接访问 webpack 和插件配置来遵循这种方法。但是我可以在我的 environment.ts 中引用 process.env 而 Bob 是你的叔叔，还是比这更复杂？

我是否需要打开 main.bundle.js 并重写 var environment = 和 //# sourceMappingURL=environment.js.map 之间的位？对于像 Angular 这样流行的东西来说，这似乎是不必要的。

【问题讨论】：

结帐角种子，他们有码头工人的支持。 github.com/mgechev/angular-seed

【参考方案1】：

如果您真的必须构建一次并多次部署相同的构建工件，那么一种解决方案（尽管在我看来有点破解）是将您的外部配置放在“资产”文件夹中，然后从环境中进行 ajax 调用.ts 读取值：

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