Environment Variables In Angular

The Code Points July 02, 2022 0

In this article, we will learn how to set up Angular Environment Variables for various contexts. We will first discover where Angular stores its environment variables. The next step is to make a fresh environment variable. Then, dependent on the environment, we assign various values to this environment variable. We read these values into the Angular Application at the end. Adding more test environments is another skill we develop.

What is Angular Environment

Before going into production, the majority of apps go through many stages. Development, testing, staging, and production are some examples of these phases. These stages are referred to as Environment. Different installations and configurations are needed for each of these environments. For instance, we require our app to be optimised, minified and uglified while you construct the app for production. We don't need any of them for development, but we do want the app to record various debugging details.

What is Angular Environment Variable

The variables that change in value depending on the environment we are in are known as environment variables. This will enable us to adapt the App's behaviour to the surrounding conditions.

For instance, you might want to use various API Endpoints for development, testing, and production. Or perhaps you don't want to transmit such console log messages in a working setting.

Where is Angular Environment Variable

Environment variable configuration and management are supported natively by Angular. The src/environments subdirectory is where it stores the environment configuration.

Two files, one named environment.ts and the other environment.prod.ts are located in the folder.

Angular offers support for the development and production environments right out of the box. The environment is used by default and is the development.ts The environment.prod.ts file is used by the production environment.

You can find the following code by opening the aforementioned files.

//environment.ts
 
export const environment = {
  production: false
};

//environment.prod.ts
 
export const environment = {
  production: true
};

There is only one declared variable in the file. The production variable, which in one environment.prod.ts is set to true and in the other to false.

How to Create Environment Variable

It is quite easy to create a new environment variable. All environment files should now include the new environment variable.

For instance, add the variable to each and every environment file as shown below to have a different apiEndPoint.

//environment.ts
 
export const environment = {
  production: false,
  apiEndPoint:"https://api.development.example.com"
};

//environment.prod.ts
 
export const environment = {
  production: true,
  apiEndPoint:"https://api.production.example.com"
};

How To Read the Environment Variable

We now have a new environment variable, and we want our programme to read it.

Import the component's default environment first. Remember to just import the default environment file and not any additional environment files, such as environment.prod.

import { environment } from '../environments/environment';

Read the value as it appears below.

apiEndPoint:string="";
constructor() {
  this.apiEndPoint = environment.apiEndPoint;
}

Testing the Environment Variable

ng serve

Using the local development server, the ng serve command builds the application in memory and provides it.

Use ng serve to run the application. By doing this, the programme will be built with the development environment or default environment. Additionally, your terminal window ought to display https://api.development.example.com.

ng serve

The serve command will be forced to construct the app using the production configuration if the --configuration="production" argument is used. The environment file is changed to environment.prod when the production configuration is used. And in your terminal window, you need to see https://api.production.example.com.

ng serve --configuration="production"

ng Build

Before distributing the app, we create it with ng build. Only the application will be built, and the finished product will be copied to the dist folder. Unlike ng serve, it does not serve the application.

The development environment is used by default by ng build.

The production environment is used by the ng build —prod or (ng build —configuration="production").

How does Angular know to switch files?

Not at all. Our responsibility is to instruct angular on which files to use in which circumstances. That's what Angular does. JSON data.

Under node projects -> <name> -> <architect -> build, the app's whole build-related configuration is kept.

All of our configuration for the production build exits at the build -> configuration -> production node.

All the magic happens in the fileReplacements section. The environment should be replaced, and the angular compiler is instructed. ts with the surroundings. when the production configuration is used, prod.ts.

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

Create our own configuration

We can easily design our own surroundings. Incorporate the test configuration now.

Create a new environment file by first going to app->environments folder. You can give the file whatever name you choose, but let's follow convention and call it environment.test.ts.

We can easily design our own surroundings. Incorporate the test configuration now.

Create a new environment file by first going to the app->environments folder. You can give the file whatever name you choose, but let's follow convention and call it environment.test.ts.

Next, as seen below, we must add a test node to the build -> settings section. To tell the compiler to use the environment.test.ts while in test configuration, add the fileReplacements section.

"configurations": {
  "production": {
      //Removed to make code smaller
  },
  "test" : {
    "fileReplacements": [
      {
        "replace": "projects/variable/src/environments/environment.ts",
        "with": "projects/variable/src/environments/environment.test.ts"
      }
    ]
  }

If we wish to use the configuration using the command ng build --configuration="test," the information above is adequate. However, if you want it to function with ng serve, then. The following "browserTarget" needs to be added to the test node under architect->serve->configurationsnode: "variable:build:test"

Keep in mind that the app's name is the variable. It must be changed to reflect the name you gave your app.

"architect": {
  "build": {
  },
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "variable:build"
    },
    "configurations": {
      "production": {
        "browserTarget": "variable:build:production"
      },
      "test": {
        "browserTarget": "variable:build:test"
      }
    }

Run ng serve --configuration="test" now, and your console window should display https://api.test.example.com.

Conclusion

This post taught us what an Angular environment variable is and how to add a new one to our Angular app so that it can be read.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in the comment section.