Как использовать переменные среды в Angular

Введение

Если вы создаете приложение, использующее API, вам нужно будет использовать ключ API для тестовых сред во время разработки и ключ API для реальных сред во время производства. В Angular вы можете создавать переменные среды с помощью файла environment.ts.

Примечание. Этот пост относится к приложениям Angular 2+.

В этом уроке вы узнаете, как использовать переменные среды в Angular.

Предпосылки

Если вы хотите следовать этой статье, вам понадобятся:

• Локальная среда разработки для Node.js. Следуйте инструкциям по установке Node.js и созданию локальной среды разработки.

Это руководство было проверено с помощью Node v16.2.0, npm v7.15.1 и @angular/core v12.0.3.

Обнаружение окружающей среды

Проекты Angular CLI уже используют переменную среды production для включения режима производства в производственной среде:

// ...

if (environment.production) {
  enableProdMode();
}

Angular также предоставляет нам служебную функцию под названием isDevMode, которая позволяет проверить, работает ли приложение в режиме разработки:

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

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

Этот пример кода выведет сообщение Development! в режиме разработки и сообщение Production! в рабочем режиме.

Добавление переменных разработки и производства

И вы также заметите, что по умолчанию в папке /src/environment у вас есть файл среды для разработки и один для производства.

Допустим, мы хотим использовать другой ключ в зависимости от того, находимся ли мы в режиме разработки или в рабочем режиме:

Для настроек разработки в environment.ts:

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

Для производственных настроек в environment.prod.ts:

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

И в нашем компоненте все, что нам нужно сделать, чтобы получить доступ к переменной, это следующее:

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

Angular позаботится о замене файла среды на правильный.

Запустите режим разработки с помощью:

ng serve

Переменная apiKey преобразуется в devKey.

Запустите производственный режим с помощью:

ng serve --configuration=production

Примечание. Ранее рекомендовался параметр --prod, но он устарел для --configuration=production.

Переменная apiKey преобразуется в prodKey.

Добавление промежуточных переменных

Добавляйте новые среды в проекты Angular CLI, добавляя новые записи в поле configurations в файле angular.json.

Примечание. Ранее эта конфигурация устанавливалась в .angular-cli.json.

Давайте добавим промежуточную среду на основе конфигурации, используемой в производстве:

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

И теперь мы можем добавить файл промежуточной среды:

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

Запустите режим разработки с помощью:

ng serve --configuration=staging

Примечание. Ранее рекомендовался параметр --env=staging, но он был заменен на --configuration=staging.

Переменная apiKey преобразуется в stagingKey.

Заключение

В этом руководстве вы узнали, как использовать переменные среды в Angular.

Если вы хотите узнать больше об Angular, ознакомьтесь с нашей темой по Angular, где вы найдете упражнения и проекты по программированию.