이 짧은 기사는 Angular에서 (dev , qa 및 prod 와 같은) 다양한 빌드 구성/대상에 대한 파일(예: 구성 파일) 교체에 관한 것입니다. 프로젝트의 경우 Angular 파일 교체 기능을 활용하여 선택한 빌드 대상에 따라 다른 파일을 제공했습니다.

{
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      },
      {
        "replace": "src/configurations/configuration.json",
        "with": "src/configurations/configuration.prod.json"
      }
    ]
  },
  "dev": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
      },
      {
        "replace": "src/configurations/configuration.json",
        "with": "src/configurations/configuration.dev.json"
      }
    ]
  },
  "qa": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.qa.ts"
      },
      {
        "replace": "src/configurations/configuration.json",
        "with": "src/configurations/configuration.qa.json"
      }
    ]
  }
}

그러나 번들 외부의 파일 대체는 Angular에서 공식적으로 지원되지 않았으며 설명된 대로 Angular 9 릴리스 이후 작동이 중단되었습니다here.
링크된 Github 문제에서 제안된 해결 방법으로 마이그레이션했으며 지금까지 잘 작동하고 있습니다. 누군가가 동일한 문제/질문을 가지고 있는 경우(또한 나 자신을 위한 접근 방식을 문서화하기 위해 ;)) 단일configuration.json 파일에 대한 접근 방식을 보여주는 simple example repository을 만들었습니다.
다음 섹션에서는 필요한 단계를 보여줍니다.

구성 폴더

이 예에서는 다양한 구성을 포함하는 전용 폴더가 생성되었습니다. 반드시 필요한 것은 아니지만 파일을 정리된 상태로 유지합니다. 다음으로 각 구성 대상에는 configuration.json 가 포함된 관련 폴더가 있습니다. 그렇지 않으면 올바른 파일을 선택하고 복사할 수 없기 때문에 추가 폴더가 실제로 필요합니다(다음 섹션에서 설명).
결국 다음과 같이 보입니다.

Angular CLI 구성 파일(angular.json)

아래 스니펫에 표시된 대로 각 배포 구성에 대해 연결된 configuration.json가 assets 섹션의 일부로 복사됩니다.

{
  "production": {
    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "input": "src/configurations/prod",
        "output": "configuration/",
        "glob": "*.json"
      },
      {
        "input": "src/configurations",
        "output": "configuration/",
        "glob": "README.md"
      }
    ],
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  },
  "dev": {
    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "input": "src/configurations/dev",
        "output": "configuration/",
        "glob": "*.json"
      },
      {
        "input": "src/configurations",
        "output": "configuration/",
        "glob": "README.md"
      }
    ],
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
      }
    ]
  },
  "qa": {
    "assets": [
      "src/favicon.ico",
      "src/assets",
      {
        "input": "src/configurations/qa",
        "output": "configuration/",
        "glob": "*.json"
      },
      {
        "input": "src/configurations",
        "output": "configuration/",
        "glob": "README.md"
      }
    ],
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.qa.ts"
      }
    ]
  }
}

구성 폴더에 생성된 하위 폴더를 통해 올바른configuration.json 파일을 선택하고 복사할 수 있습니다. output 속성의 도움으로 dist 폴더 내의 경로가 정의됩니다. 예를 들어 루트 경로의 구성 폴더에 복사됩니다. 또한 README.md는 configuration.json 옆에 표시되어 속성과 응용 프로그램에 미치는 영향을 설명합니다. 전용 폴더를 생성하면 두 파일을 나란히 보관하는 데 도움이 됩니다.



접근 방식에 대해 마음에 들지 않는 점은 이제 모든 빌드 구성에 대해 assets 속성을 복제해야 한다는 것입니다. assets 폴더(이미지, 글꼴, 번역 등)는 복사되지 않습니다. 또한 전용 하위 폴더를 만들어야 하는 것도 파일 교체만큼 편리하지 않습니다(이는 주요 단점보다 성가신 일이지만).

중복 문제를 해결하기 위한 더 나은 아이디어(또는 솔루션)가 있는 경우 듣고 싶습니다. 그렇지 않으면 누군가에게 도움이 될 수 있기를 바랍니다.