Building and serving Angular apps with environment variables

Question

I am deploying a Angular app through openshift container where I have different environments(Dev,QAT, Prod) to deploy.

I am using this CLIENT_ID in my code base with environment.CLIENT_ID to access value. on localhost it's working.

I have 2 environments file in my source code.

1. environment.ts

    export const environment = {
       producution: false
       CLIENT_ID: xyz-456
    }

2. environment.prod.ts

    export const environment = {
       producution: false
       CLIENT_ID: "$CLIENT_ID"
    }

project.json file

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
}

ocp_configs/qat-a/app_cfg.env file

CLIENT_ID=abcd-123

In Openshift container under ConfigMaps YAML, I can see QAT values are present as CLIENT_ID: abcd-123

Problem- Locally production configuration is working fine with nx serve command. But after deployment for QAT, it's still picking up to Dev values instead of QAT values.

While running Qat app URL, I am still getting CLIENT_ID as xyz-456, But correct value should be CLIENT_ID: abcd-123

First I thought FileReplacement is not working, I tried to find answers but not helping much, Angular 14

Answer 1

A lots of missing information to help. The main one is How your application is served?

Does the file replacement work?

If it's not working, it's probably that you don't use the right configuration.
Be sure to explicitly mention the configuration in the command that build your application:
exemple: nx run myApp:build:production (there other way to run a command in nx with there way to specify the configuration)

With the missing information on how the app is delivered, I suspect that you are doing a simple serve. Know that the default configuration for this command is developpement.

About Environnement variable in Angular

Real Environnement variable doesn't work when building Angular with WebPack. So, I wonder why you say that it's working localy. More info whould help.

But with some magic, it's possible to use them in webpack. Nx have a page about this.

Newer version of Angular can use esbuild, but I don't know if it support Environnement Variable and if not, how to use them.

Finaly, you have also to be aware that those variable will be embended when the application is built. So you cannot build once and deploy on multiple environement.

Also, I've glance at this recent reddit post. Maybe it can help you.