Angular 6에서 'ng serve'를 통해 환경을 설정하는 방법


169

Angular 5.2 앱을 Angular 6으로 업데이트하려고합니다. Angular 업데이트 가이드 ( angular-cliv6 업데이트 포함)의 지침을 성공적으로 따랐 으며 이제는

ng serve --env=local

그러나 이것은 나에게 오류를 준다 :

알 수없는 옵션 : '--env'

여러 환경 ( dev/local/prod)을 사용하는데 이것이 Angular 5.2에서 작동하는 방식입니다. Angular 6에서 환경을 어떻게 설정합니까?


1
그것의 v6, 당신 angular-cli은 전체 응용 프로그램과 함께 업데이트 , 그래서 나는 그것의 명백한 생각 :]
마틴 Adámek

5
매우 도움이되었습니다, 마틴 통찰력을 공유해 주셔서 감사합니다. 실제로 그것은 가장 명백하지 않습니다.
Maxxx

답변:


303

당신은 새로운 사용해야 configuration옵션 (이 작품 ng buildng serve뿐만 아니라를)

ng serve --configuration=local

또는

ng serve -c local

angular.json파일 을 보면 각 구성 (Aot, Optimizer, 환경 파일 등)에 대한 설정을보다 세밀하게 제어 할 수 있습니다.

"configurations": {
  "production": {
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

환경 별 구성 관리에 대한 자세한 정보는 여기 에서 얻을 수 있습니다 .

아래의 다른 응답에서 지적했듯이 새 '환경'을 추가해야하는 경우 빌드 작업 및 필요에 따라 서브테스트 작업에 새 구성을 추가해야합니다 .

새로운 환경 추가

편집 : 명확하게하려면 파일 교체를 build섹션 에서 지정해야합니다 . 따라서 ng serve특정 environment파일 ( dev2 ) 과 함께 사용 하려면 먼저 build새로운 dev2 구성 을 추가하기 위해 섹션을 수정해야 합니다

"build": {
   "configurations": {
        "dev2": {

          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.dev2.ts"
            }
            /* You can add all other options here, such as aot, optimization, ... */
          ],
          "serviceWorker": true
        },

그런 다음 방금 선언 servedev2 build 구성을 가리키면서 새 구성을 추가하도록 섹션을 수정하십시오.

"serve":
      "configurations": {
        "dev2": {
          "browserTarget": "projectName:build:dev2"
        }

그런 다음 ng serve -c dev2dev2 구성 파일을 사용하는을 사용할 수 있습니다


구성에 base-href를 추가 할 수 있는지 알고 있습니까? 또는 그냥 빌드에서
--c

@EduardoTolino : 당신이 할 수있는 예,이 baseHref옵션
데이비드

개발 환경에 대한 원격 디버깅 포트를 어디에서 지정할 수 있습니까? 로 디버깅하십시오 VSCode. 에서는 Angular 6물론. 있도록 ng serve발사 때 명령이 원격 디버거 포트를 포함 Chrome브라우저를.
Stephane


1
ng serve -c local "ng serve"와 비교하여 응용 프로그램을 컴파일하는 데 시간이 걸립니다
Vignesh

46

대답은 좋아 보인다.
그러나
Configuration 'xyz' could not be found in project ...
빌드 오류가 발생하여 오류가 발생했습니다.
업데이트 된 빌드 구성뿐만 아니라 구성도 제공해야 합니다.

따라서 혼란을 남기지 않기 위해 :

  1. --env 에서 지원되지 않습니다 angular 6
  2. --env--configuration|| 로 변경되었습니다 -c(그리고 지금은 더 강력합니다)
  3. 새로운 환경 파일을 추가하는 것 외에도 다양한 환경을 관리하려면 angular.json파일을 약간 변경해야 합니다.
    • 빌드 { ... "build": "configurations": ... 속성 에 새 구성 추가
    • 새로운 빌드 구성 에는 일부만 포함될 수 fileReplacements있지만 더 많은 옵션을 사용할 수 있습니다.
    • serve { ... "serve": "configurations": ... 속성 에 새 구성 추가
    • 새로운 서브 구성browserTarget="your-project-name:build:staging"

8

당신은 시도 할 수 있습니다: ng serve --configuration=dev/prod

사용하려면 : ng build --prod --configuration=dev

다른 종류의 환경을 사용하기를 바랍니다.


ng serve --configuration = dev / prod 명령은 왜 ng serve와 비교하는데 시간이 걸립니까?
Vignesh

ng serve --configuration = prod는 파일 최소화 및 생산 준비 코드로 인해 ng serve --configuration = prod보다 시간이 더 걸립니다.
amku91

확인 난 "역할이 --configuration = dev에 NG"명령은 또한 복용 더 많은 시간을 의미 사용하는 경우
인 Vignesh

아니요, 시간이 더 걸리지 않습니다. prod 환경에는 프로덕션 용 코드를 축소, 축소 및 최적화하기위한 추가 단계가 있습니다. 이러한 추가 단계를 명시 적으로 활성화하지 않으면 다른 환경은 정상적인 시간이 걸립니다.
Reginaldo Camargo Ribeiro

6

Angular 2-5에 대해서는 Angular의 Multiple Environment 기사를 참조하십시오.

Angular 6 용 ng serve --configuration=dev

참고 : 각도 6에 대해서도 동일한 기사를 참조하십시오. 그러나 어디서나 --env사용하십시오 --configuration. 각도 6에 잘 작동합니다.


2

ng serve -c dev개발 환경에 명령 을 사용할 수 있습니다ng serve -c prod프로덕션 환경의 에

건물도 동일하게 적용됩니다. ng build -c dev개발자 빌드에 사용할 수 있습니다


2

Angular는 더 이상 --env를 지원하지 않으므로 대신 사용해야합니다.

ng serve -c dev

개발 환경과

ng serve -c prod 

생산을 위해.

참고 : -c또는--configuration


이것은 1 년 전에 묻고 대답했으며, 귀하의 답변이 잘못되었습니다 -c(단일 대시 사용) 또는 --configuration(이중 대시 사용).
Martin Adámek가

0

Angular 6에서이 명령을 사용하여 빌드하십시오.

ng build --prod --configuration=dev
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.