Pass Angular environment variables to compiled static angular files in spring boot

Question

I am now using angular and spring boot to build website project. When we deploy, we will ng build --output-path=../spring-boot-project/src/main/resources/static", angular and generate a static folder in spring boot, like /resource/static. Then we build and deploy a .jar file to our prod(or lab) environment.

so when we run the .jar file, how can we pass some environment varibles to angular part(the static files in spring boot project).

More specifically, I want to set angular environment in 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"

how can I pass these values(different values because of different profiles) to angular side?

Answer 1

The issue with what you are asking is that , once you place the angular generated files under the static folder, springboot will treat the files as static assets and will not use any templating engine for us to bind any furthur data to the files. It will receive the request and if it matched the asset it will serve it directly.

For your use-case to work, you will have to set the angular environment in the angular build itself. What you could maybe do is, have the angular build parameterized like using maven profiles so that you could control the angular build using maven command itself. You might probably be using the front-end-builder plugin to trigger the angular build right. So , in that case when you provide the npm run-script command you could provide which customized command you want to run by providing different commands in your package.json. For buid setup read : How to integrate an Angular 4 app with a Spring Boot stack?

Answer 2

Externalize configuration to separate file

Create a file settings.js in assets that shall hold your env variables:

const GlobalSettings = {
   ... your settings values
}

Add this file to your index.html so it will automatically be loaded during startup (but not packaged by Webpack).

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

In your code GlobalSettings would then be available - well - globally.

Inject content of settings.js into environment

If you prefer to work with the environment inside of your Angular app you could overwrite the specific properties of environment in main.ts:

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

Now you can change your settings by replacing settings.js instead of having to rebuild the whole app.

Edit file using environment variables

Use envsubst to replace variables in your 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>

This will obviously not work if you ship your Angular app inside a Java jar.

Provide settings.js via Spring backend

Do not copy the file to the static directory (and thus not into the jar).

Instead create an endpoint in your Java app that listens on /assets/settings.js. Here you can use all the Java/Spring magic (including reading env variables) to assemble settings.js with the desired content.