-
Angular v21은 AI 중심 웹 개발 시대에 맞춰 Signal Forms, Angular Aria, MCP 서버, Vitest, Zoneless 변경 감지 등 주요 기능을 포함한 대규모 업데이트
-
Signal Forms는 Signals 기반의 반응형 폼 관리로 타입 안전성과 스키마 기반 검증을 제공
-
Angular Aria는 접근성을 우선한 헤드리스 UI 컴포넌트 라이브러리로, 8가지 패턴과 13개 구성요소를 개발자 스타일에 맞게 커스터마이징 가능
-
Vitest가 기본 테스트 러너로 채택되어 안정화되었으며, zone.js는 기본 포함 대상에서 제외되어 Zoneless 전략이 표준화
- 새 문서 사이트와 AI 튜터, MCP 서버 도구를 통해 개발자 경험과 AI 통합 역량을 강화한 점이 이번 버전의 핵심
주요 기능 개요
- Angular v21은 AI 지원 개발 환경과 확장 가능한 웹 애플리케이션 구축을 위한 기능을 대폭 강화
- 새 버전은 Signal Forms, Angular Aria, MCP 서버, Vitest, Zoneless 변경 감지를 중심으로 구성
- 새 애플리케이션은 기본적으로 zone.js를 포함하지 않음, 대신 Zoneless 전략을 채택
- Angular CLI는 Vitest를 기본 테스트 러너로 설정, Karma와 Jasmine은 여전히 지원
- AI 에이전트와 협업 가능한 MCP 서버가 안정화되어 LLM이 최신 Angular 기능을 활용 가능
Signal Forms (실험적 기능)
-
Signal Forms는 Signals 기반의 반응형 폼 상태 관리 라이브러리
- 폼 모델이 signal로 정의되어 필드와 자동 동기화
-
타입 안전성과 스키마 기반 검증 로직 내장
-
form()과 [field] 지시자를 사용해 템플릿과 바인딩
-
ControlValueAccessor 없이 커스텀 컴포넌트 바인딩 가능
- 이메일 검증, 정규식 매칭 등 기본 검증 패턴 포함, 커스텀 검증자 추가 가능
- 현재 실험적 단계로, 피드백을 기반으로 개선 예정
Angular Aria (개발자 프리뷰)
-
Angular Aria는 접근성을 최우선으로 한 헤드리스 UI 컴포넌트 라이브러리
- 8가지 패턴(Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree)과 13개 컴포넌트 제공
- 모든 컴포넌트는 비스타일 상태로 제공되어 자유로운 커스터마이징 가능
- 설치 명령:
npm i @angular/aria
- Angular 팀은 세 가지 컴포넌트 개발 경로를 제시
- Angular Aria: 접근성 중심 헤드리스 컴포넌트
- CDK: Drag & Drop 등 행동 프리미티브 제공
- Angular Material: Material Design 스타일의 완성형 컴포넌트
MCP 서버와 AI 통합
-
MCP 서버는 Angular CLI에 내장된 AI 지원 도구 서버로, v21에서 안정화
- 주요 기능
-
get_best_practices: 모범 사례 제공
-
search_documentation: 공식 문서 검색
-
find_examples: 최신 Angular 예제 제공
-
onpush_zoneless_migration: Zoneless 전환 계획 생성
-
ai_tutor: AI 기반 Angular 학습 도우미
- MCP 서버를 통해 LLM의 지식 컷오프 문제를 해소, Signal Forms와 Angular Aria 같은 최신 기능 활용 가능
Vitest 기본 테스트 러너
-
Vitest가 Angular의 기본 테스트 러너로 안정화
-
ng test 명령으로 실행 가능
- Karma는 2023년 이후 폐기, Jest와 Web Test Runner는 v22에서 제거 예정
- 기존 프로젝트는 Karma/Jasmine 계속 사용 가능
-
ng g @schematics/angular:refactor-jasmine-vitest 명령으로 자동 마이그레이션 지원
Zoneless 변경 감지
-
zone.js는 브라우저 API를 패치해 변경 감지를 수행했으나, 성능 한계 존재
-
Signals 기반 Zoneless 변경 감지가 v21에서 기본값으로 전환
- 2024년 기준 Google 내부 신규 앱의 절반 이상이 Zoneless 사용
- HTTP Archive 기준 1,400개 이상 공개 앱이 Zoneless 채택
- Zoneless의 장점
-
Core Web Vitals 개선, 번들 크기 감소, 디버깅 단순화, 비동기 처리 호환성 향상
- 기존 앱은 마이그레이션 가이드 또는 MCP 서버의
onpush_zoneless_migration 도구 활용 가능
문서 및 개발자 경험 개선
-
angular.dev 사이트 전면 개편
- 새로운 랜딩 페이지와 최신 개념 중심의 문서 구조
-
AI 개발 리소스 허브(angular.dev/ai) 신설
-
Signals 튜토리얼, 라우팅, DI, Material 테마, Tailwind CSS 가이드 업데이트
- MCP 서버의
search_documentation 도구로 최신 문서 검색 가능
추가 개선 사항
-
CLDR 라이브러리 v47로 업데이트 (통화·날짜 포맷 개선)
-
템플릿 내 정규식 지원, Signals 포매터 내장, IntersectionObserver 옵션 커스터마이즈 가능
-
SimpleChanges 제네릭화, KeyValue 파이프 개선, Material 유틸리티 클래스 추가
-
CDK Overlay가 브라우저 기본 popover 사용으로 접근성 향상
- Angular DevTools에 Route 시각화 및 Signal 그래프 추가
커뮤니티 기여
- v20 이후 215명이 Angular 코드베이스에 기여
- 주요 기여
-
Jaime Burgos: 마이그레이션 및 진단 개선
-
Angelo Parziale: NgClass/NgStyle 변환 마이그레이션 추가
-
Hryhorii Avcharov: DevTools에 Transfer State 탭 추가
-
Luke Beach, Ruslan Lekhman, Cédric Exbrayat, Younes Jaaidi 등 Vitest 및 CDK 관련 기능 개선
기타
- Angular 마스코트 투표 결과는 2025년 11월 20일 YouTube 릴리스 이벤트에서 공개 예정
- Angular 팀은 Signal Forms와 Angular Aria를 통해 확장성과 자신감을 갖춘 웹 앱 개발 환경을 지속적으로 발전시킬 계획
-
ng update 명령으로 최신 버전으로 업그레이드 가능