Angular environment variables lookup

I'd like to inject environment variables in my angular app from my CI/CD pipeline so that environment.ts and proxy.config.json can be automatically configured.

For example,

export const environment = {
  var: $MY_VAR
};

{
  "/api": {
    "target": "$MY_API_URL",
    "secure": true,
    "changeOrigin": true
  }
}

where MY_VAR and MY_API_URL are gitlab CI/CD variables. Does Angular lookup for variables as quarkus/spring do? Or I am forced to configure and declare all environments by hand into angular.json?

I've found several ways of doing this in the past and these methods may be a bit strange there are probably much better solutions available.

1. SED Command

You can create a script for building your environment in your package.json like this:

{
  ...
  "scripts": {
    ...
    "build:env": "ng generate environments && sed -i 's|};| production: '$PRODUCTION',\\n apiUrl: '$API_URL',\\n };|' ./src/environments/environment.ts"
    ...
    
  }
  ...
}

Imagine you have src/environments.ts like this:

export const environment = {};

That script would leave you with:

export const environment = {
  production: ...
  apiUrl: ...
}

Basically what it is doing is replacing '}' in environments.ts whatever your provide.

2. Custom script

Another option would be to create your own shell script which created the files for you. This one creates both local and production environments. The file wouldn't need to be created because the script does it for you.

In scripts/build-environments.sh

#!/bin/sh

cd src
mkdir environments
cd environments

echo "export const environment = {
  production: false,
  apiUrl: '"$API_URL"',
  };" > environment.ts

echo "export const environment = {
  production: true,
  apiUrl: '"$API_URL"',
  };" > environment.prod.ts

echo 'Finished setting up environment'

exit 0

Then your package.json could look like this:

{
  ...
  "scripts": {
    ...
    "build:env": "sh scripts/build-environments.sh"
    ...
  }
  ...
}