replacing environment variables at build time - Angular 12

Issue

I have the following in my environment.prod.ts file

export const environment = { production: true, customValue: 'PLACEHOLDER' };

I am all ready doing the replacement of the correct environment file in my angular.json and do my build using ng build --prod --configuration=production

is it possible to somehow add to the build command so that I can dynamically set the value of customValue at build time?

I have tried using a flag --env.customValue="hello" this didnt seem to work as i expected. The static solution here How do I add build-time environment variables into application with angular-cli? assumes you know the value and would simply put it in each environment file, this is not the case for me.

The dynamic solution uses file-replacement which i want to avoid. any other solutions would be appreciated

Solution

Custom build-time environment variables cannot be directly passed using command-line flags in the Angular CLI. Nevertheless, by combining npm scripts with environment file manipulation, you can obtain dynamic environment variable values at build time.

To resolve your issue:

1. Make changes to environment.prod.ts: Put a placeholder in place of customValue that you will dynamically replace:

export const environment = {
 production: true,
 customValue: '__CUSTOM_VALUE__'
};

2. Create an npm script: Update your package.json to include a script that replaces the placeholder with the desired value before the build:

"scripts": {
 "build:production": "npm run set-env-value && ng build --prod --configuration=production",
 "set-env-value": "node set-env-value.js"
}

3. Create a Node.js script (eg: set-env-value.js) to replace the placeholder with the desired value. This script should be in the root of your Angular project.

const fs = require('fs');
const targetPath = './src/environments/environment.prod.ts';
const customValue = process.env.CUSTOM_VALUE || 'default_value';
fs.readFile(targetPath, 'utf8', (err, data) => {
  if (err) {
    console.error(`Error reading file: ${targetPath}`, err);
    process.exit(1);
  }
  const updatedData = data.replace(/__CUSTOM_VALUE__/g, customValue);
  fs.writeFile(targetPath, updatedData, 'utf8', (err) => {
  if (err) {
    console.error(`Error writing file: ${targetPath}`, err);
    process.exit(1);
  }
  console.log(`Custom value set to: ${customValue}`);
  });
});

4. Run the build script with the desired custom value:

CUSTOM_VALUE=hello npm run build:production

This approach dynamically sets the customValue in the environment.prod.ts file before the Angular build, allowing you to specify the value at build time without using file replacements directly in Angular CLI.

The script dynamically sets the customValue for the current build, and after the build is complete, the environment.prod.ts file will still have the placeholder (CUSTOM_VALUE). The original environment.prod.ts file is not modified by this script.

Answered By - Jaykant