본문 바로가기

프론트엔드/앵귤러

어헤드 오브 타임 컴파일러 작동원리

반응형

 

변환단계

코드분석 (code analysis) 코드생성 (code generation) 템플릿 체크 (template type checking)
소스코드 표본 생성하지만 변환은 하지 않는 단계. 메타데이터 문법 오류만 기록 메타데이터 오류 분석을 계속 실시하고 오류 표시 옵션 단계로 템플릿 내에 binding 문법 확인

템플릿 체크 옵션 켜기 tsconfig.json 파일에서

"strictInjectionParameters": true
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    // ...
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true, // 옵션켜기
    // ...
  }
}

소스코드: https://angular.io/guide/angular-compiler-options


작동원리

코드분석

먼저, 코드분석 단계에서 TypeScript compiler가 코드 분석 후 .d.ts라는 타입정보를 생성합니다(이정보를 바탕으로 AOT compiler가 애플리케이션 코드를 생성). AOT compiler는 이 단계에서 decorator안에 기록된 메타데이터를 분석하고 .metadata.json파일을 .d.ts마다 생성합니다.

코드생성

코드생성 단계에서는 compiler가 메타데이터 문법 오류체크를 실시합니다. collector는 오류검사를 통과한 function이나 static method가 하나의 리턴 밸류를 가질 때 이를 수용합니다.


참고

 

Angular

 

angular.io

 

 

728x90
반응형