Configuring Environment Variables in Angular | Angular Environment

environment.ts file content

Speaking of Development & Deployment, If Development is a meal than Deployment is a desert to that meal. Unless you add a good desert to your meal, you meal is incomplete.

If you are here than you might bee looking an answer to your question of “How we can configure environment variables for different environments ???”. If that’s the case you have landed to the right place. Angular again standing out of the zone provides you even the privilege of doing this & in this article we will learn how we can configure environment variables for dev, pre-prod, prod. So Why seek the permission of one you are doing a good turn to, let’s begin 😉.

Step 1 : Editing environment.ts file

Let’s us start editing our environment.ts file followed by creating environment.dev.ts for dev, environment.preprod.ts for pre-prod & environment.prod.ts for prod.

export const environment: {
  production: boolean;
  title: string;
  restPathRoot: string;
  userURL: string;
} = {
  production: false,
  title: 'Local Environment Variables',
  restPathRoot: 'http://localhost:3000/',
  userURL: 'https://user-dev.company.com/users/',
};

As you can see above I have declared 4 variables as per my need i.e. : (1) — prodcution of type boolean which will be true only for the prod variables, (2) — title of type string to provide a title as to which environment the group of variables belong, (3) — restPathRoot of type string pointing to my another application which can be your server-side app & (4) — userURL of type string pointing to the user’s dev directory. In the same way you can declare the variable as per your requirement. Now let you us create rest of our environment files inside /environment folder.

Step 2 : Creating environment.dev.ts

export const environment: {
    production: boolean;
    title: string;
    restPathRoot: string;
    userURL: string;
} = {
    production: false,
    title: 'Dev Environment Variables',
    restPathRoot: 'https://employee-dev.company.com/',
    userURL: 'https://user-dev.company.com/users/',
};

Step 3 : Creating environment.preprod.ts

export const environment: {
    production: boolean;
    title: string;
    restPathRoot: string;
    userURL: string;
} = {
    production: false,
    title: 'Dev Environment Variables',
    restPathRoot: 'https://employee-pp.company.com/',
    userURL: 'https://user-pp.company.com/users/',
};

Step 4 : Creating environment.prod.ts

export const environment: {
  production: boolean;
  title: string;
  restPathRoot: string;
  userURL: string;
} = {
  production: true,
  title: 'Production Environment Variables',
  restPathRoot: 'https://employee.company.com/',
  userURL: 'https://user.company.com/users/',
};

Step 5 : Updating fileReplacements arrya in angular.json file

Now I will ask your utmost attention as this is the most crucial step, now we have to update our angular.json file. In that you will find a section of configuration where we have to mention the file replacements for different environments.

You might already have that production configuration, as shown in the image. Update the fileReplacements array and at the end of the “}”, give comma & add the below code for dev & pre-prod environment.

            "preprod": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.preprod.ts"
                }
              ]
            },
            "dev": {
              "budgets": [
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.dev.ts"
                }
              ]
            }

Conclusion & Project Configuration Link

In this article we got the answer of “How we can configure environment variables for different environments ???”. With this method there is only one limitation and that is if your git is not restricted or it is public than anyone can see your environment variables which is not a good practice.

Below I am providing you links of a demo configured project

https://stackblitz.com/edit/angular-ivy-k7wrcn

https://github.com/thesiddharthraghuvanshi/environment-variables-configuration-in-angular

Hope this article will help at some extent, please follow for more such articles.

Thankyou for your time & Happy Coding 😋