Programing tips by Lamghari

Environment Variables in Angular / Ionic

How to effectively manage your environment variables in Angular / Ionic applications with different scenarios ( Testing, preproduction, production.. )

If you are reading this article, you maybe want to manage your environment well, especially if you are using multiple environments like development, testing, pre-production, production, demo .. and to do that there is the famous environment.ts file inside src/environment folder of your Angular / Ionic project.
By default in an Angular project, you’ll have two files, one for the development environment and the other for production. BUT, .. what if you need to add other environments? What if a developer edited the production file by mistake?
A was using only those two files for months while managing theme in every environment git branch; so I’m having a Git branch per environment where i set the proper variables (this worked for me well for months, until last week where some developer pushed the preproduction file into the production git branch, the build pipelines automatically run, and then ops the users now write in the preproduction database without me knowing.). Ki

While looking for a solution, I found in fact two pretty solutions that i’m going to share in this article.

Solution 1: Create a environment.ts file for each environment

Angular by default provides a prebuilt solution, which is creating multiple environment files, like:

• environment.ts : for developement
• environment.prod.ts : for production
• environment.preprod.ts : for preoproduction
• environment.testing.ts : testing

…

Then manage all this in the angular.json file in root of your project :

angular.json

So basically, when you run ng build --prod Angular will replace your environment.ts file by the environment.prod.ts

And now let’s add the proper configuration for the other environments (let’s take preprod as an exemple) :

• Create environment.preprod.ts file in src/environment folder
• In your angular.json file add the following lines (edit the config if you want) :

"configurations": {
  "production": {
    "optimization": true,
    ..
  },
  "preprod": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.preprod.ts"
      }
    ]
  }
}

• And now run this command to generate the build (Or add it to your build script in your CI/CD pipelines)

ng build --configuration=preprod

if you are on Ionic :

ionic cordova build android --configuration=preprod

Solution 2 : Create a environment.ts file using process.env

I prefer this solution because it’s more safe for me, and actually sometimes you don’t want to commit some environment variable in your code ( Such as a secret key … ) and you don’t want to make it visible to all your team.

In this solution we will overwrite the default environment file created by Angular before building using environment variables we set in our deployment environment (heroku, azure ..).

To do so, we will create a JS or TS file in the root of the project, let’s name it ‘set-env.js’ (add your variables to this code):

After creating this file, let’s add a ‘config’ script to our package.json :

"scripts": {
  "ng": "ng",
  "config": "node set-env.js",
  "config-ts": "ts-node set-env.ts",
  "start-dev": "ng serve -o",
  "build": "npm run config && ng build --aot --prod",
  ...
},

And now enjoy executing your ‘npm run config’ command in your build script.

In brief, here is a comparison of the two solutions :

Solution 1 :

• Prebuild in Angular / Ionic projects and you don’t have to add extra files to manage them.
• You still have to commit those files into your repository which maybe not too safe for some environment variables.
• You have to change the build command in your CI/CD pipelines for each environment.

Solution 2 :

• You have to add an extra file to generate your environment.ts file.
• Safe solution for your secret keys .. etc and you don’t have to commit those files to your repository.
• Nothing to change in your CI/CD you can continue using ng build --prod .

Conclusion :

Finally, Environment variables are an important part of your application, and you have to give them the exact attention you give to debugging, testing, and validating your app, and I’m pretty sure you will not enjoy finding out that your client was writing on the testing database ( That you reset every day .. ) or finding out that one of your developers was testing (by mistake) the app with the production variables.

References :

https://angular.io/guide/build

Thanks for reading this article 😄

Your feedback and comments are welcome.