在 Spring Boot 中将 Angular 环境变量传递给已编译的静态 Angular 文件

我现在使用 Angular 和 Spring Boot 来构建网站项目。当我们部署时，我们将ng build --output-path=../spring-boot-project/src/main/resources/static",Angular 并在 Spring Boot 中生成静态文件夹，例如/resource/static。然后我们构建一个 .jar 文件并将其部署到我们的产品（或实验室）环境中。

因此，当我们运行 .jar 文件时，如何将一些环境变量传递给 Angular 部分（Spring Boot 项目中的静态文件）。

更具体地说，我想在 Spring Boot application.yml 中设置角度环境：

spring:
  profiles:
    active: dev
  main:
    banner-mode: "off"

---

spring:
  profiles: dev
angular.v1: "something1_dev"
angular.v2: "something2_dev"


---

spring:
  profiles: prod
angular.v1: "something1_prod"
angular.v2: "something2_prod"

我怎样才能将这些值（由于不同的轮廓而有不同的值）传递到有角度的一侧？

将配置外部化到单独的文件

创建文件settings.js in assets这将保存你的环境变量：

const GlobalSettings = {
   ... your settings values
}

将此文件添加到您的index.html所以启动时会自动加载（但不会被Webpack打包）。

<script src="assets/settings.js" type="application/javascript"></script>

在你的代码中GlobalSettings然后将在全球范围内提供。

注入内容settings.js进入环境

如果您更喜欢使用 Angular 应用程序内部的环境，您可以覆盖环境的特定属性main.ts:

environment.someProperty = GlobalSettings.someProperty;
... bootstrap Angular

现在您可以通过替换来更改设置settings.js而不必重建整个应用程序。

使用环境变量编辑文件

Use envsubst替换你的变量settings.js

// settings.template.js
const GlobalSettings = {
  someProperty: "${SOME_PROPERTY}"
}

// command that starts your server, e.g. docker command
envsubst < settings.template.js > settings.js && <command to start webserver>

如果您将 Angular 应用程序放在 Java jar 中，这显然不起作用。

Provide settings.js通过 Spring 后端

不要将文件复制到static目录（因此不在 jar 中）。

相反，在您的 Java 应用程序中创建一个端点来侦听/assets/settings.js。 在这里您可以使用所有 Java/Spring 魔法（包括读取环境变量）来组装settings.js与所需的内容。