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 프로젝트에는 구성 부분과 프로젝트 관련 정보를 설정하는 Angular.json 파일이 있으므로 프로젝트에서 사용할 새 환경 파일을 추가해야 합니다.
프로젝트/아키텍트/빌드/구성 아래에 새 부품을 추가할 수 있습니다.

"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"
 },

맞춤형 환경을 위한 Ready Build

구성 부분이 준비되면 ng 빌드 명령으로 실행되는 구성 플래그로 요구 사항에 따라 각 환경에 대한 빌드를 만들 수 있습니다.
예를 들어.
ng build --configuration uat
GitHub Source Code

빌드가 준비되면 각 환경에 따라 파일을 게시할 수 있습니다.

내 기사 품질을 개선하는 데 도움이 될 귀하의 존경하는 피드백을 제공하십시오.

https://www.ankitkumarsharma.com/

또한 GitHub , , Medium 에서 저를 팔로우하고 코드 쿼리에 대한 자세한 기사 업데이트를 확인하십시오.

감사