如何在构建 angular 应用程序后拥有和读取环境文件

Question

我正在构建一个 angular 应用程序。此 angular 应用程序将交付给具有不同需求和基础设施的多个客户。它将需要几个值（例如后端服务器、标题等），这些值应该由客户在安装时配置。

在调试中，我完全可以想象这些值来自 environnments/environments.ts 文件，但是一旦构建，environment.prod.ts 就无法再更改，因此可能无法构建。

如何向 angular 应用程序提供值（我猜是通过某些文件或环境变量）（以及如何读取它们）？

尚未决定，但很可能构建的文件将包装在 nginx docker 映像中。

Answer 1

有两种配置：

1. Compile-Time-Configuration
2. Runtime-Configuration

或许，以下文章可以帮助您找到最适合您的项目：https://juristr.com/blog/2018/01/ng-app-runtime-config/

Answer 2

考虑到您想先构建您的应用，然后select一个特定的环境来部署它，这个tutorial可能对您有用。总之，您只需执行 4 个步骤：

1. Add a JSON configuration file in the src folder
2. Update our angular/webpack configuration to include the file in our dist folder
3. Add a simple configuration service with a call to get our config data from our config file
4. Use APP_INITIALIZER to invoke the method retrieving our config data during the bootstrap process

如果您遵循这 4 个步骤，您的配置将是 dist 文件夹中的 JSON（或者您在 angular.json 文件中的任何其他输出路径）。

至于docker部分，您可以直接在nginx容器中添加配置文件。尽管我猜您更愿意创建一个 docker 卷。所以你不必担心为每个客户端复制正确的配置文件，而只需将他们的特定配置文件保存在他们的服务器中。