如何在 Angular 中为不同的环境设置配置或属性文件？答案

【问题标题】：how to set config or properties file for different environments in Angular?如何在 Angular 中为不同的环境设置配置或属性文件？
【发布时间】：2018-09-21 06:38:25
【问题描述】：

Angular 5.2.9：我必须根据不同的环境（pre prod、prod 等）更改一些 api 键。但是现在我必须更改我的 appSettings 类中的键并在每次部署到每个 env 之前构建它。是一种将 api 密钥保存在某些配置或属性文件中的方法，以便我可以将其保存在每个环境中并在任何地方部署相同的构建代码。

【问题讨论】：

标签： angular deployment build properties config

【解决方案1】：

我使用两种不同的方式来配置我的 Angular 应用程序。第一个是在服务器端呈现 Angular index.html 页面。您可以在后端使用任何语言来呈现包含以下内容的 HTML 页面：

<head>
  <meta charset="utf-8">
  <title>...</title>
  <base href="/angular-app-context/">
  <script>
  var CONFIG = {
    BACKEND_URL : "http://10.0.0.1:9000/backend-context/",
    AVAILABLE_LANGUAGES : "fr,de,it".split(",")
    // here you can configure whatever you want with server-side properties
  };
  </script>
  <link href="styles.16fc164c6ad7cb#######.bundle.css" rel="stylesheet"/>
</head>
<script type="text/javascript" src="inline.f499ecf4e7218#######.bundle.js"></script>
<!-- other Angular files -->

请注意，编译生成的 Angular 文件在名称中带有校验和。您需要以某种方式将这些名称动态地注入到您的index.html 模板中。在我的例子中，我使用 Gradle 来执行此操作，它会编译 Angular 应用程序，从 dist 文件夹中检索生成文件的名称，然后将它们注入到 Tomcat 非常简单的 WAR 应用程序的 index.html 模板文件中（细节超出了您的问题范围）。

这些CONFIG 属性可以从您的Angular 代码中访问。看看this post 展示如何。我的建议是仅将其用于最少的配置（通常是后端 URL）。

配置应用程序的第二种方法是在启动时使用 HTTP 从后端加载信息。只需将它们打包为 JSON 并通过常规的HttpClient 调用访问它们。如果您的后端具有非常不同的 URL，您可以使用我的第一个建议中的 BACKEND_URL 来提供帮助。

【讨论】：