컴필레이션 컨텍스트 (Compilation context)

본 포스트는What is a Compilation Context in Angular? 의 내용을 개인적인 메모의 목적으로 재게재 한 것입니다.

컴필레이션 컨텍스트 (Compilation Context)

컴파일할 파일, 컴포넌트 등의 모음입니다. 이것이 의미하는 것은 해당 컨텍스트에는 컴파일러가 어떠한 에러도 없이 컴파일 하는데 필요한 모든 것을 포함하고 있다는 것입니다.

typescript 를 컴파일할 때, 여러분은 컨텍스트를 files, include 또는 exclude 옵션을 사용한 tsconfig.json 파일을 이용하여 제어합니다. 이 방식의 typescript 컴파일러는 여러분의 ts 코드간의 관계를 찾을 때 여러분이 제공한 파일들만 사용할 것 입니다.

Angular 컴파일러 (Angular Compiler)

Angular 컴파일러로 돌아가보겠습니다.

Angular 컴파일러는 기본적으로 컴포넌트의 템플릿을 컴파일 합니다. 템플릿을 컴파일 하려면, Angular 는 해당 템플릿에 포함된 모든 컴포넌트와 지시자에 대해 알고 있어야 합니다.

아래와 같은 컴포넌트가 있다고 가정합시다.

@Component({
  selector: 'a-comp`,
  template: `
    <h2>Hello, I'm a-comp</h2>
    <div [scroll]="options">
      <b-comp></b-comp>
    </div>
  `
})
export class ComponentA {}

그리고 이 컴포넌트는 어떤 Angular 모듈에 아래와 같이 정의되어 있다고 합시다.

@NgModule({
  declarations: [
    ComponentA
  ]
})
export class AModule {}

ComponentA를 컴파일하기 위해서는 Angular 는 다음의 순서를 따를 것입니다.

1. 해당 컴포넌트가 포함된 NgModule 을 찾습니다.

ComponentA 는 AModule에 포함되어 있으므로 이 모듈이 ComponentA의 컴필레이션 컨텍스트(Compilation context) 가 됩니다.

2. 이 AModule의 범위에 포함된 다른 지시자들을 찾습니다.

Angular는 이 NgModule 에 포함/추이적 연관되어 있는 모든 모듈을 검색합니다. (Angular 2 Use component from another module)

3. 관련된 지시자를 모두 컴파일러에게 제공하여 컴필레이션을 실행(수행)합니다.

compileComponent(outputCtx, compMeta, ngModule, ngModule.transitiveModule.directives 
                                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

현재 우리가 보고 있는 AModule 은 다른 어떠한 모듈도 import 하고 있지 않으며, 다른 지시자를 정의하고 있지 않습니다. 이것은 Angular 가 ComponentA의 템플릿을 컴파일 할 수 없다는 의미입니다.

<div [scroll]="options">
  <b-comp></b-comp>
</div>

왜냐하면, Angular 컴파일러는 지시자 scroll @Input 과 b-comp 를 찾아보겠지만, AModule의 범위에는 해당 지시자들이 포함되어 있지 않기 때문입니다.

다시 말해, NgModule 은 컴포넌트를 빌드할 수 있는 올바른 컴필레이션 컨텍스트를 제공하지 못했습니다. typescript 컴파일러를 위한 tsconfig.json 처럼, NgModule 은 Angular 컴파일러를 위한 설정의 한 종류 입니다.

컴포넌트는 NgModule 과 다른 컴포넌트들에서 선언되며, 다른 모듈에 import 되고 exported 되면서 동일한 컴필레이션 컨텍스트를 공유합니다. (이에 대한 상세한 내용은 다음의 링크를 확인하기 바랍니다. Angular 2 Use component from another module)