Angular 2 / 4编译后如何更改环境变量

Question

我看到你可以把环境变量放在environement.ts / environement.prod.ts中。但是这些文件被编译了，所以我不能在构建后更改它们。有没有什么办法可以解决这个问题？（我正在使用angular-cli）谢谢。

- user3805731

---

“环境”的目的是轻松创建不同的构建。在构建之后访问文件的唯一方法是将它们添加到资产文件夹中或从外部访问它们。 - Z. Bagley

Answer 1

嗯，就像这样：

environment.ts

环境.ts

export const environment = {
    env: 'Dev'
};

environment.prod.ts

export const environment = {
    env: 'Prod'
};

编辑我解决这个问题所做的是使用 window 对象，如下所示：

export const environment = {
    env: window['env'] || 'Dev' // you get it for prod
};

在index.html中添加了以下内容：

<script src="./config.js"></script>

在config.js文件中，“系统管理员”可以放置以下内容：

window['env'] = 'New environment';

这样，如果没有提供配置文件，则环境变量将具有一个值，如果提供了配置文件，则将从配置文件中获取该值。

- user4676340

---

好的，它们应该是环境变量，意味着你不能改变它们...如果你想要变量改变，你可以将它们存储在window对象或localStorage中。 - user4676340

环境变量不会改变...但我不知道它们是什么...我会把应用程序交给系统管理员，他会设置它们...这就是为什么。 - user3805731

好的，谢谢！ 还有一个问题：我可以用那个解决方案创建不同的变量吗？ - user3805731

我不知道你指的是什么，但如果你想要添加变量，那就像这样调用它：myVar: window['anyNameYouWant'] || 'default value' - user4676340

Answer 2

我们可以在main.bundle.js文件中的var environment = {}对象中找到所有的环境变量。

注意：更改后请重新启动服务器。

- Kapil Thakkar

---

我认为每次想要做出更改时，在 main.bundle.js 中打开、查找和替换并不是完美的解决方法。 - Muhammed Moussa

Answer 3

在构建完成后，我们可以找到main.bundle脚本文件，您可以在其中查找并更改环境变量。

在main.bundle.js文件中：

var environment = {
  production: false,
  serviceUrl: "<<URl>>",
  prodService: "environment"
};

- scott_dennis

---

在进行更改之前最好备份主要的 main-es5 *********** 文件，这样做会更容易。 - Shailesh Tiwari