Как использовать несколько переменных окружения в Angular

В этой статье мы узнаем о различных переменных окружения в разных файлах.

Во-первых, когда мы создаем любое приложение Angular, то по умолчанию оно имеет два файла окружения, один из которых предназначен для dev, а другой — для prod.
Но если нам нужно создать несколько файлов окружения, например, QA, UAT, PROD, DEV и т.д. и все файлы, у нас есть различные постоянные переменные для API и других значений.

Добавьте больше пользовательских файлов окружения с различными значениями

Для наших различных требований, мы должны создать различные файлы в папке окружения, такие как qa, uat, xyz и т.д.
Мы можем добавлять значения в соответствии с нашими требованиями.

Я создал 3 файла окружения в соответствии с различными требованиями (фиктивно). Вы можете создать их в соответствии с вашими требованиями

environment.qa.ts // for QA Testing Part
environment.uat.ts // for UAT Testing Part
environment.xyz.ts // for client demo part

// we generated this file for UAT Testing Part
export const environment = {
  production: true,
  environmentName: 'UAT',
  apiUrl: 'uat.abc.com',
  paginationSize:'20',
};

Обновление части конфигурации в файле anjular.json

В каждом ангулярном проекте есть файл angular.json, который содержит часть config и настройку информации, связанной с проектом, поэтому мы должны добавить новые файлы окружения для использования в нашем проекте.
Мы можем добавить новую часть в разделе projects/architect/build/configurations

"uat": {
   "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.uat.ts"
  }
   ],
   "outputHashing": "all"
 },
 "qa": {
   "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.qa.ts"
  }
   ],
   "outputHashing": "all"
 },
 "xyz": {
   "fileReplacements": [
  {
    "replace": "src/environments/environment.ts",
    "with": "src/environments/environment.xyz.ts"
  }
   ],
   "outputHashing": "all"
 },

Готовая сборка для пользовательского окружения

Когда ваша часть конфигурации готова, вы можете создать сборку для соответствующего окружения в соответствии с вашими требованиями с помощью флага — configuration run with ng build command.
Например.

ng build --configuration uat

Исходный код GitHub

Когда сборка готова, вы можете опубликовать свои файлы в соответствии с соответствующим окружением.

Пожалуйста, оставьте свой отзыв, это будет полезно для улучшения качества моей статьи.

https://www.ankitkumarsharma.com/

Также, пожалуйста, следите за мной на GitHub, Twitter, Medium и Dev для получения обновлений статей с практическими вопросами по коду.

Спасибо