Angular v22 발표

• Angular v22는 AI 에이전트 흐름을 Angular MCP의 개발 서버 제어 도구, Angular Agent Skills, 실험적 WebMCP, Google AI Studio·Gemini Canvas의 Angular 생성 워크플로로 확장함
• 안정성과 개발 편의성 개선을 목표로 Signal Forms, Angular Aria, resource·httpResource를 실험/프리뷰 단계에서 프로덕션 준비 상태로 올림
• Signal Forms는 Reactive Forms·강한 타입 폼·템플릿 기반 폼·signals 반응성을 결합한 선언형 폼 API이며, 문서 보강·커뮤니티 피드백 반영·Angular Material 및 Angular Aria 지원을 마침
• API와 템플릿 개선은 Router의 Navigation API 통합, 경로 리소스 정리 제어, @Service와 injectAsync, HTML 요소 주석·spread/rest·@switch 검사·템플릿 화살표 함수 지원으로 이어짐
• Angular v22는 새 앱의 OnPush 기본값, ChangeDetectionStrategy.Eager 명칭 변경, 2026년 3분기 @boundary 개발자 프리뷰, Webpack 계열 지원 중단 예정과 TSGo 집중으로 미래 기반을 강화함

프로덕션 준비 상태로 올라간 기능

• Signal Forms는 Reactive Forms의 장점, 강한 타입 폼, 템플릿 기반 폼의 선호 요소, signals의 반응성을 결합한 반응형·조합형·선언형 폼 API임
• v21 출시 이후 angular.dev 폼 가이드를 갱신하고, 커뮤니티 피드백과 이슈를 반영했으며, Angular Material 및 Angular Aria 연동을 지원함
• Angular Aria는 개발자가 스타일과 비즈니스 로직을 맡고 UI 지시자와 패턴이 접근성을 처리하도록 설계된 접근성 프리미티브이며, v22에서 프로덕션 사용 가능 상태가 됨
• Angular Aria의 12개 UI 패턴은 공통 접근성 패턴을 다루며, API 안정화, Signal Forms 완전 지원, 테스트 하네스를 갖춤
• 비동기 반응형 API는 resource로 비동기 리소스를 signal 방식의 사용성으로 다루고, httpResource로 HTTP 데이터 가져오기를 더 선언적인 모델로 처리함
• resource와 httpResource는 v22에서 프로덕션 앱에 사용할 수 있으며, 사용법은 공식 가이드에서 확인 가능함

AI 개발과 에이전트 워크플로

• Angular v22는 AI-native 애플리케이션을 위한 흐름을 코드 작성용 에이전트 도구, 브라우저 에이전트 도구, AI 개발 플랫폼의 세 영역으로 확장함
• Angular MCP의 devserver.wait_for_build는 에이전트가 애플리케이션을 빌드하고 출력 결과를 검토해 다음 단계를 결정하도록 지원하며, 빌드 로그의 코드 오류를 바탕으로 자가 치유 루프를 만들 수 있음
• devserver.start와 devserver.stop은 개발 서버 시작·중지를 담당하며, 이 도구들은 테스트 및 end-to-end 도구와 함께 v22에서 stable로 승격됨
• Angular MCP는 ai_tutor, modernize, onpush_zoneless_migration 등 현대적 Angular 앱 개발을 돕는 도구 목록을 늘려가고 있음
• Angular Agent Skills의 angular-developer는 Angular Aria와 Signal Forms 같은 최신 기능을 포함한 모던 Angular 개발 지침을 모델에 제공하며, 파일은 140줄 미만이고 필요한 시점에 코드 샘플과 참조 파일을 불러오는 점진적 공개 방식을 사용함
• angular-new-app은 에이전트 환경에서 Angular를 처음 탐색하는 사용자가 로컬 Angular 코딩 환경을 구성하도록 안내하며, 이 skills는 Antigravity 같은 AI 개발 도구나 에이전트 워크플로 환경에서 사용 가능함
• Contributor Skills는 Angular codebase 내부에서 기능을 개발하는 데 필요한 mental model 이해를 돕고, 첫 pull request를 준비하는 사람과 경험 많은 팀원 모두에게 가치가 있음
• 실험적 WebMCP는 브라우저 안에서 에이전트가 사용할 구조화 도구를 만들고 노출하게 해 DOM 상호작용 필요성을 줄이며, 앱 전체·routes·services 도구 정의와 dynamic Signal Forms 기반 자동 도구 생성을 지원함
• WebMCP 통합 문서는 angular.dev/ai/webmcp에서 확인 가능함
• Google AI Studio와 Gemini Canvas는 전통적 코딩 배경이 없는 builders가 Angular 기반 프로젝트를 시작하도록 지원하며, Gemini 웹앱의 내장 코딩 샌드박스에서는 브라우저 안에서 전체 애플리케이션을 만들 수 있음
• Gemini 워크플로에서는 prompt에 “Angular”를 지정하면 Angular 앱이 생성되고, 생성 뒤에는 브라우저에서 수동 편집하거나 AI와 계속 대화해 다듬거나 Firebase 통합을 요청할 수 있음
• Google AI Studio에서는 configuration panel에서 Angular를 선택하고 prompt를 시작하는 유사한 워크플로를 사용할 수 있으며, 생성 후 채팅으로 기능을 추가하고 배포까지 이어갈 수 있음

Router와 의존성 주입 API

• Navigation API 통합은 Router를 브라우저 native Navigation API와 맞춰 더 적은 boilerplate로 앱 이동 제어를 제공함
• Router는 RouterLink와 표준 anchor tag를 포함한 모든 navigation request를 자동으로 가로챌 수 있음
• native scroll behavior를 활용해 back/forward 이동 시 사용자가 기대한 위치에 도달하도록 하며, custom scroll-management logic 없이 bundle size 영향도 없음
• 브라우저 native navigation lifecycle에 직접 연결해 page transition 중 global loading indicator와 정확한 접근성 announcement를 더 쉽게 처리함
• 경로 정리 제어는 withExperimentalAutoCleanupInjectors와 destroyDetachedRouteHandle 두 기능으로 메모리 관리를 더 명시적으로 다룸
• withExperimentalAutoCleanupInjectors는 더 이상 active하지 않은 route와 연결된 dependency injector를 자동으로 destroy해 idle route-level provider와 resource를 정리함
• destroyDetachedRouteHandle은 custom RouteReuseStrategy 사용 시 detached route handle 안의 component를 clean하게 destroy하는 공식 public API임
• @Service decorator는 대부분의 use case에서 @Injectable({ providedIn: 'root' }) 패턴을 대체하며, deeper configuration이나 constructor injection이 필요한 경우 @Injectable을 계속 사용할 수 있음
• injectAsync 는 service의 asynchronous dependency injection을 지원해 code splitting과 on-demand loading을 가능하게 하며, service는 auto-provided 상태여야 하고 @Service가 이를 처리함
• injectAsync 예시에서 ReportExporter service는 처음 사용될 때까지 load되지 않으며, prefetch: onIdle 같은 prefetch 설정도 가능함
• 사용법은 injectAsync 공식 문서에서 확인 가능함
• 기타 개선으로 TypeScript 6 전체 호환성과 template pipeline 및 runtime efficiency 성능 개선이 들어감

템플릿 작성 경험과 변경 감지

• HTML element 안의 property와 binding 수준에서 comment를 사용할 수 있어 template 가독성과 명확성이 높아지며, VS Code comment toggling도 지원함
• Angular는 같은 element에서 여러 번 match되는 host directive를 자동으로 de-duplicate함
• directive가 template과 host directive 양쪽에서 match되면 template match가 우선하며, host directive의 input/output map은 merge됨
• input 또는 output이 여러 이름으로 expose되면 Angular가 error를 발생시켜 naming conflict를 방지함
• template에서 spread/rest syntax를 사용할 수 있으며, object literal, array literal, function call에 적용 가능함
• @switch는 여러 @case가 같은 output을 공유할 수 있어 code duplication을 줄임
• union type을 쓰는 @switch block에서 @default never;를 사용하면 처리되지 않은 값이 있을 때 compile-time error를 받을 수 있음
• template 안 inline function은 arrow function 형태로 사용할 수 있으며, 짧고 단순한 함수에 적합하고 복잡하거나 오래 실행되는 함수는 template에 두지 않는 조건이 붙음
• 새 애플리케이션에서는 OnPush가 기본 change detection 전략이며, zoneless 기본값과 performance by default 목표에 맞춰짐
• 기존 기본값이던 ChangeDetectionStrategy.Default는 ChangeDetectionStrategy.Eager로 이름이 바뀌어 change detection cycle에서의 동작을 더 명확하게 드러냄

오류 경계, 폐기 예정, 향후 방향

• @boundary 는 Angular template 안에서 error boundary를 구현하는 새 API이며, 감싼 code block에서 올라오는 error를 catch하고 fallback content를 지정할 수 있음
• 전자상거래 checkout 같은 high-stakes flow에서 단일 component failure가 전체 page를 무너뜨리는 문제를 줄이는 데 목적이 있음
• @boundary는 2026년 3분기에 developer preview로 제공될 예정임
• Webpack support, @angular-devkit/build-angular builders, @ngtools/webpack 등은 v22에서 deprecated 상태가 됨
• Angular는 application builder의 TSGo support에 집중하며, 더 자세한 deprecation 정보는 Angular CHANGELOG에서 확인 가능함