Angular tsconfig.json 왜 compilerOptions랑 angularCompilerOptions가 따로 있을까?

Angular 프로젝트 하다 보면 tsconfig.json에 아래처럼 두 개의 옵션 블록이 있어서 헷갈리신 적 있으시죠?

{
  "compilerOptions": { ... },
  "angularCompilerOptions": { ... }
}

이게 왜 따로 있는지 아주 간단히 정리해드릴게요!

한 줄 요약

TypeScript 컴파일러(tsc)와 Angular 컴파일러(ngc/ngtsc)는 완전히 다른 컴파일러라서 옵션을 분리해 놓은 거예요!

자세히 알아보기

구분	compilerOptions	angularCompilerOptions
담당 컴파일러	TypeScript 컴파일러 (tsc)	Angular 전용 컴파일러 (ngtsc)
하는 일	.ts → .js 변환 (일반 타입스크립트 문법)	@Component, template, 디렉티브, 데코레이터 등 Angular 고유 기능 처리
누가 관리하나	Microsoft (TypeScript 팀)	Google (Angular 팀)
대표 옵션	target, module, strict, baseUrl	strictTemplates, enableIvy, strictInjectionParameters
Angular 없어도 필요?	필요 (순수 TS 프로젝트에서도 씀)	불필요 (Angular 프로젝트에서만)

실제 빌드 과정에서는 어떻게 될까?

ng build나 ng serve 실행하면

1. Angular CLI가 tsconfig.json을 읽음
2. compilerOptions → TypeScript 컴파일러(tsc)에게 넘김
3. angularCompilerOptions → Angular 컴파일러(ngtsc)에게 넘김
4. 두 컴파일러가 각자 자기 일 함 → 완성!

예시 tsconfig.json (최신 Angular 추천 설정)

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "target": "ES2022",
    "module": "ES2020",
    "strict": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  },
  "angularCompilerOptions": {
    "enableIvy": true,                    // 기본값이지만 명시 추천
    "strictTemplates": true,              // 템플릿 타입 엄격 체크 (강력 추천!)
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true
  }
}

결론

• TypeScript는 “Angular가 뭔지 몰라요~” → 일반 TS 옵션만 봄
• Angular는 “템플릿이랑 데코레이터는 제가 책임질게요!” → Angular 전용 옵션만 봄

그래서 둘을 섞지 않고 깔끔하게 분리해 놓은 거예요