Question

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

Answer 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进行此操作，Gradle编译Angular应用程序，从dist文件夹中检索生成文件的名称，然后将它们注入Tomcat的index.html模板文件中非常简单的WAR应用程序（详细信息超出了您的问题范围）。

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

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

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

1 个答案: