Angular 앱의 컴파일 시간 대 런타임 구성

더 큰 응용 프로그램을 개발할 때 일종의 구성이 필요할 가능성이 매우 높습니다. 이는 단순히 앱의 버전 번호를 시각화하는 것부터 사용자 정의 테마를 삽입하는 것까지 다양할 수 있습니다. Angular에는 컴파일 타임 및 런타임 구성과 같은 다양한 접근 방식이 있습니다. 둘 다 살펴 보겠습니다.

컴파일 타임 구성

(Click to open Egghead lesson)

컴파일 타임 구성이란 무엇입니까? 기본적으로 구성을 컴파일하고 번들링할 때 구성을 앱으로 컴파일한다는 의미입니다. Angular CLI를 사용하는 경우 이러한 컴파일 시간 구성 옵션을 갖도록 미리 구성된 설정이 이미 있습니다.


environments 폴더 안에는 environment.ts 및 environment.prod.ts 파일이 있습니다.

// environment.ts
export const environment = {
  production: false
};

// environment.prod.ts
export const environment = {
  production: true
};

이들은 단순한 JavaScript 개체이므로 환경별 속성을 추가할 수 있습니다.
Angular 애플리케이션 부트스트랩을 담당하는 기본main.ts 파일은 enableProdMode() 호출과 같은 일부 런타임 최적화를 적용하기 위해 해당 환경 파일을 사용하여 앱이 프로덕션 모드를 실행 중인지 확인합니다.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

environment를 파일로 가져오기만 하면 해당 environment.ts 개체에 대한 참조를 임의로 가져올 수 있습니다.

import { environment } from '../environment/environment';

// do something meaningful with `environment`
console.log(environment);

우리는 항상 environment.ts를 가져오며 environment.prod.ts와 같은 환경 특정 파일을 가져오지 않습니다. 그 이유는 컴파일 시간에 Angular CLI가 환경별 구성 파일의 이름을 environment.ts로 바꾸고 그에 따라 앱으로 컴파일하기 때문입니다.

"준비"환경을 위해 새 파일을 만들 수도 있습니다. 새environment.staging.ts를 만들고 angular.json 파일에서 구성해야 합니다.

{
  // ...
  "projects": {
    "demo": {
      //...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          // ...
          "configurations": {
            "staging": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.staging.ts"
                }
              ],
              //...
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              //...
            }
          }
        },
        //...
      }
    }
  }
}

마지막으로 어떤 환경을 구축하고 있는지 CLI에 알려야 합니다. 적절한 구성 파일을 선택할 수 있습니다. 이는 package.json의 스크립트 섹션에서 발생합니다.

{
  ...
  "scripts": {
    "ng": "ng",
    "build": "ng build --prod",
    "build:staging": "ng build --prod --env=staging"
  },
  ...
}

--env=<your-environment> 플래그를 전달하고 있습니다. --prod는 달리 지정되지 않은 경우 이미 생산 구성을 자동으로 사용하는 내장 명령입니다. 또한 AOT 컴파일도 가능합니다.

런타임 구성

(Click to open Egghead lesson)

그러나 앱의 구성 설정을 변경하거나 API를 통해 설정을 노출할 수 있어야 하는 경우 런타임 구성 접근 방식을 사용해야 합니다. 일반적으로 필요한 구성 옵션이 포함된 JSON 파일(예: appConfig.json)이 있으면 서버에서 앱과 함께 배포할 수 있습니다. 앱이 실행되면 해당 JSON 파일에 대한 HTTP 요청을 실행하고 설정을 읽습니다.

그러나 원하는 것은 설정이 로드되고 적용된 후에만 앱을 시작하는 것입니다. 순진한 접근 방식은 다음과 같습니다. app.component.ts에 *ngIf 가드를 추가하기만 하면 됩니다.

@Component({
    selector: 'app-root',
    template: `
        <div *ngIf="configLoaded">

        </div>
    `
})
export class AppComponent implements OnInit {
    configLoaded = false;

    ngOnInit() {
        this.http.get('./assets/appConfig.json')
            .subscribe(config => {
                // do something with your configuration
                ...

                this.configLoaded = true;
            });
    }
}

그런 식으로 configLoaded가 참이고 결과적으로 <div>가 표시되지 않는 한 다른 구성 요소가 시작되지 않습니다.

이것이 작동하는 동안 보다 우아한 방법이 있습니다. APP_INITIALIZER 토큰을 사용하여 Angular의 부트스트래핑 단계에 연결할 수 있습니다. 먼저 원격 구성 가져오기를 처리하는 Angular 서비스를 만듭니다...

Read more »