Detailed explanation of how to use environment variables in Angular

Introduction

If you are building an application that uses APIs, you will want to use the API key of the test environment during development and the API key of the production environment in production. In Angular, you can create environment variables through files.

In this tutorial, you will learn how to use environment variables in Angular.

Prerequisites

If you want to follow this article, you need:

• A local development environment for . Please refer to "How to Install and Create a Local Development Environment".

This tutorial has been verified that it can be found in Node v16.2.0.npmv7.15.1 and@angular/coreRun under v12.0.3.

Detection environment

Angular CLI project has been usedproductionEnvironment variables, enable production mode in production environment:

// ...

if () {
  enableProdMode();
}

Angular also provides us with a name calledisDevModeA practical function that can be used to check whether the application is running in development mode:

import { Component, OnInit, isDevMode } from '@angular/core';

@Component({ ... })
export class AppComponent implements OnInit {
  ngOnInit() {
    if (isDevMode()) {
      ('Development!');
    } else {
      ('Production!');
    }
  }
}

This sample code will record messages in development mode'Development!', record messages in production mode'Production!'。

Add development and production variables

You will also notice that by default, in/src/environmentThere is an environment file for the development environment and a production environment in the folder.

Suppose we want to use a different key based on whether we are in development or production mode:

ForDevelopment settings in:

export const environment = {
  production: false,
  apiKey: 'devKey'
};

ForProduction settings in:

export const environment = {
  production: true,
  apiKey: 'prodKey'
};

In our component, we just need to do this to access the variable:

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

Angular will be responsible for switching the correct environment files.

Run the development mode with the following command:

ng serve

apiKeyThe variable will be parsed asdevKey。

Run production mode with the following command:

ng serve --configuration=production

apiKeyThe variable will be parsed asprodKey。

Add temporary variables

ByFiledconfigurationsAdd a new entry to the field, and you can add a new environment in the Angular CLI project.

Let's add a temporary environment based on the configuration used in production:

{
  // ...
  "projects": {
    "angular-environment-example": {
      // ...
      "prefix": "app",
        "build": {
          // ...
          "configurations": {
            "staging": {
              // ...
              "fileReplacements": [
                {
                  "replace": "src/environments/",
                  "with": "src/environments/"
                }
              ],
              // ...
            },
            // ...
          },
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "staging": {
              "browserTarget": "angular-environment-example:build:staging"
            },
          }
        },
      }
    }
  }
}

Now we can add a temporary environment file:

export const environment = {
  production: true,
  apiKey: 'stagingKey'
};

Run the development mode with the following command:

ng serve --configuration=staging

apiKeyThe variable will be parsed asstagingKey。

in conclusion

In this tutorial, you learned how to use environment variables in Angular.

If you want to learn more about Angular, check out our Angular topic page for exercises and programming projects.

The above is a detailed explanation of how to use environment variables in Angular. For more information about Angular environment variables, please pay attention to my other related articles!