В этой статье мы узнаем о разных переменных среды в разных файлах.

Во-первых, когда мы создаем любое угловое приложение, по умолчанию у него есть два файла среды, один для разработки, а другой для производства.
Но если нам нужно создать несколько файлов среды, таких как 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 есть файл angular.json, в котором есть часть конфигурации и информация, связанная с проектом, поэтому мы должны добавить новые файлы среды для использования в нашем проекте.
Мы можем добавить новую часть в раздел 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"
 },

Готовая сборка для пользовательской среды

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

ng build --configuration uat

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

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

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

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

Спасибо