Secrets env on Angular

angular.json

{
  ...,
  "projects": {
    "tutorial-app": {
      ...,
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ...,
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.prod.ts",
                  "with": "src/environments/environment.ts"
                }
              ],
             ...
          }
        }
      }
    }
  }
}

environment.prod.ts

//PATH: src/environments/environment.prod.ts

export const environment = {
  production: true,
  firebase: {
    projectId: 'undefined',
    appId: 'undefined',
    databaseURL: 'undefined',
    storageBucket: 'undefined',
    apiKey: 'undefined',
    authDomain: 'undefined',
    messagingSenderId: 'undefined',
  },
  appVersion: '0.1.0',
};

package.json

{
  "version": "0.1.0",
  "scripts": {
    "config": "node src/environments/setEnv.js",
    "build": "npm run config && ng build --configuration=production",
    ...
  },
 ...
}

secrets-envs-on-angular.md

A simple method to anonymize environment variables on Angular using Firebase data as an example. It's important that you don't forget of put the follow path in your .gitignore:

src/environments/environment.ts

setEnv.js

//PATH: src/environments/setEnv.js

const setEnv = () => {
  const fs = require("fs");
  const writeFile = fs.writeFile;
  // Configure Angular `environment.ts` file path
  const targetPath = "./src/environments/environment.prod.ts";
  // Load node modules
  const appVersion = require("../../package.json").version;

  let env;
  try {
    env = require("./environment.ts");
  } catch (e) {
    console.log("The file `environment.ts` doest exist: \n");
  }

  require("dotenv").config();

  // `environment.ts` file structure
  const envConfigFile = `export const environment = {
    production: ${!!env},
    firebase: {
      projectId:  '${
        process.env.FIREBASE_PROJECT_ID || env?.firebase?.projectId
      }',
      appId: '${process.env.FIREBASE_APP_ID || env?.firebase?.appId}' ,
      databaseURL: '${
        process.env.FIREBASE_DATABASE_URL || env?.firebase?.databaseURL
      }',
      storageBucket: '${
        process.env.FIREBASE_STORAGE_BUCKET || env?.firebase?.storageBucket
      }',
      apiKey: '${process.env.FIREBASE_API_KEY || env?.firebase?.apiKey}',
      authDomain: '${
        process.env.FIREBASE_AUTH_DOMAIN || env?.firebase?.authDomain
      }',
      messagingSenderId: '${
        process.env.FIREBASE_MESSAGING_SENDER_ID ||
        env?.firebase?.messagingSenderId
      }'
    },
    appVersion: '${appVersion}'
  };
  `;
  console.log(
    "The file `environment.ts` will be written with the following content: \n"
  );
  writeFile(targetPath, envConfigFile, (err) => {
    if (err) {
      console.error(err);
      throw err;
    } else {
      console.log(
        `Angular environment.ts file generated correctly at ${targetPath} \n`
      );
    }
  });
};

setEnv();