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