时间戳

首页 > 解决方案 > 如何在生产中以角度获取可编辑的环境变量文件

angular - 如何在生产中以角度获取可编辑的环境变量文件

问题描述

我有一个常量服务，它保留应用程序的所有常量，包括后端的基本 url。

export class ConstantsService {
  public BACKEND_URL  = 'http://10.0.27.176:8000/';
}

这不太灵活，因为我无法BACKEND_URL在构建项目后更改。我想要一个可以导出BACKEND_URL并存在于生产构建中的文件，这样我也可以BACKEND_URL在构建后进行更改。

我这样做了：

import {environment} from '../environments/environment.prod';
...
export class ConstantsService {
  public BACKEND_URL = environment.url;
}

环境.prod.ts

export const environment = {
  production: true,
  url: 'http://10.0.27.176:8000/';
};

但问题是这个 environment.prod.ts 在构建中不存在。

有人可以告诉我如何实现这一目标吗？

编辑： Folwing 是我的 bg build --prod 输出。没有 environment.prod.ts

Date: 2018-09-11T11:52:10.945Z
Hash: 96c48ccf441d2f7a204f
Time: 9301ms
chunk {scripts} scripts.3af8bf49d802296d8ab1.js (scripts) 174 kB  [rendered]
chunk {0} 0.d9c510e0e0d04dde4c78.js () 1.27 kB  [rendered]
chunk {1} runtime.a18a7eb7c080a20cb142.js (runtime) 1.84 kB [entry] [rendered]
chunk {2} styles.0260add3f34224e145b6.css (styles) 5.58 kB [initial] [rendered]
chunk {3} polyfills.92108b287fe28032870b.js (polyfills) 59.6 kB [initial] [rendered]
chunk {4} main.4bbca11d5e8a6cdb36c0.js (main) 316 kB [initial] [rendered]

标签： angulartypescript

解决方案

当您拥有多个可以编辑配置但使用相同构建的环境时，您正在寻找的内容非常有用。

重新构建整个应用程序以更改配置是没有意义的，尤其是在您需要管理部署并希望内部版本号对齐或拥有在多个位置托管相同应用程序的应用程序的企业环境中，例如私有云场景，由于各种原因，不需要 SaaS 托管（所有客户端使用相同的应用程序）。

我们使用 APP_INITIALIZER form Angular 在应用启动时加载特定于环境的变量以获取数据。

看看这里的文档：https ://angular.io/api/core/APP_INITIALIZER

获取数据数据的 URL 通常最好按照惯例执行，我们让构建系统在初始化程序加载的相对路径 /assets/config/env.json 中放置一个具有环境特定设置的 .json 文件。

推荐阅读