- Angular v21 là bản cập nhật lớn dành cho kỷ nguyên phát triển web lấy AI làm trung tâm, bao gồm các tính năng chính như Signal Forms, Angular Aria, máy chủ MCP, Vitest, phát hiện thay đổi Zoneless
- Signal Forms cung cấp quản lý form phản ứng dựa trên Signals với tính an toàn kiểu và xác thực dựa trên schema
- Angular Aria là thư viện component UI headless ưu tiên khả năng truy cập, cung cấp 8 mẫu và 13 thành phần có thể tùy biến theo phong cách của nhà phát triển
- Vitest được chọn làm test runner mặc định và đã ổn định, trong khi zone.js bị loại khỏi gói mặc định để chuẩn hóa chiến lược Zoneless
- Trọng tâm của phiên bản này là tăng cường trải nghiệm nhà phát triển và năng lực tích hợp AI thông qua trang tài liệu mới cùng AI tutor và công cụ máy chủ MCP
Tổng quan các tính năng chính
- Angular v21 tăng cường mạnh các tính năng để xây dựng môi trường phát triển có hỗ trợ AI và ứng dụng web có khả năng mở rộng
- Phiên bản mới tập trung vào Signal Forms, Angular Aria, máy chủ MCP, Vitest, phát hiện thay đổi Zoneless
- Ứng dụng mới mặc định không bao gồm zone.js, thay vào đó áp dụng chiến lược Zoneless
- Angular CLI thiết lập Vitest làm test runner mặc định, trong khi Karma và Jasmine vẫn tiếp tục được hỗ trợ
- Máy chủ MCP có thể cộng tác với AI agent đã được ổn định, cho phép LLM sử dụng các tính năng Angular mới nhất
Signal Forms (tính năng thử nghiệm)
- Signal Forms là thư viện quản lý trạng thái form phản ứng dựa trên Signals
- Mô hình form được định nghĩa bằng signal và tự động đồng bộ với các trường
- Tích hợp sẵn an toàn kiểu và logic xác thực dựa trên schema
- Dùng
form() và chỉ thị [field] để liên kết với template
- Có thể bind với component tùy chỉnh mà không cần
ControlValueAccessor
- Bao gồm các mẫu xác thực cơ bản như kiểm tra email, khớp biểu thức chính quy, và có thể thêm validator tùy chỉnh
- Hiện vẫn ở giai đoạn thử nghiệm và sẽ tiếp tục được cải thiện dựa trên phản hồi
Angular Aria (bản xem trước cho nhà phát triển)
- Angular Aria là thư viện component UI headless đặt khả năng truy cập lên hàng đầu
- Cung cấp 8 mẫu (Accordion, Combobox, Grid, Listbox, Menu, Tabs, Toolbar, Tree) và 13 component
- Tất cả component đều được cung cấp ở trạng thái không có style, cho phép tùy biến tự do
- Lệnh cài đặt:
npm i @angular/aria
- Nhóm Angular đưa ra ba hướng phát triển component
- Angular Aria: component headless tập trung vào khả năng truy cập
- CDK: cung cấp behavior primitives như Drag & Drop
- Angular Material: component hoàn chỉnh theo phong cách Material Design
Máy chủ MCP và tích hợp AI
- Máy chủ MCP là máy chủ công cụ hỗ trợ AI được tích hợp trong Angular CLI và đã ổn định ở v21
- Các tính năng chính
- get_best_practices: cung cấp best practices
- search_documentation: tìm kiếm tài liệu chính thức
- find_examples: cung cấp ví dụ Angular mới nhất
- onpush_zoneless_migration: tạo kế hoạch chuyển đổi sang Zoneless
- ai_tutor: trợ lý học Angular dựa trên AI
- Thông qua máy chủ MCP, Angular giải quyết vấn đề knowledge cutoff của LLM, giúp tận dụng các tính năng mới như Signal Forms và Angular Aria
Vitest là test runner mặc định
- Vitest đã ổn định với vai trò test runner mặc định của Angular
- Có thể chạy bằng lệnh
ng test
- Karma đã bị ngừng dùng từ năm 2023, còn Jest và Web Test Runner dự kiến bị loại bỏ ở v22
- Các dự án hiện có vẫn có thể tiếp tục dùng Karma/Jasmine
- Hỗ trợ migration tự động bằng lệnh
ng g @schematics/angular:refactor-jasmine-vitest
Phát hiện thay đổi Zoneless
- zone.js trước đây vá các browser API để thực hiện phát hiện thay đổi, nhưng có giới hạn về hiệu năng
- Phát hiện thay đổi Zoneless dựa trên Signals đã trở thành mặc định trong v21
- Tính đến năm 2024, hơn một nửa số ứng dụng mới nội bộ tại Google đã sử dụng Zoneless
- Theo HTTP Archive, hơn 1.400 ứng dụng công khai đã áp dụng Zoneless
- Ưu điểm của Zoneless
- Cải thiện Core Web Vitals, giảm kích thước bundle, đơn giản hóa debug, tăng khả năng tương thích với xử lý bất đồng bộ
- Các ứng dụng hiện có có thể dùng hướng dẫn migration hoặc công cụ
onpush_zoneless_migration của máy chủ MCP
Cải thiện tài liệu và trải nghiệm nhà phát triển
- Trang angular.dev được làm mới toàn diện
- Trang landing mới và cấu trúc tài liệu xoay quanh các khái niệm hiện đại
- Bổ sung AI developer resource hub (angular.dev/ai)
- Cập nhật hướng dẫn về Signals tutorial, routing, DI, Material theming, Tailwind CSS
- Có thể tìm kiếm tài liệu mới nhất bằng công cụ
search_documentation của máy chủ MCP
Các cải tiến bổ sung
- Cập nhật thư viện CLDR lên v47 (cải thiện định dạng tiền tệ và ngày tháng)
- Hỗ trợ biểu thức chính quy trong template, Signals formatter tích hợp sẵn, và tùy biến tùy chọn IntersectionObserver
- SimpleChanges được generic hóa, cải thiện pipe KeyValue, thêm utility class cho Material
- CDK Overlay cải thiện khả năng truy cập bằng cách dùng popover mặc định của trình duyệt
- Angular DevTools bổ sung trực quan hóa Route và biểu đồ Signal
Đóng góp từ cộng đồng
- Kể từ v20, đã có 215 người đóng góp vào codebase Angular
- Các đóng góp chính
- Jaime Burgos: cải thiện migration và chẩn đoán
- Angelo Parziale: bổ sung migration chuyển đổi NgClass/NgStyle
- Hryhorii Avcharov: thêm tab Transfer State vào DevTools
- Luke Beach, Ruslan Lekhman, Cédric Exbrayat, Younes Jaaidi cùng nhiều người khác đã cải thiện các tính năng liên quan đến Vitest và CDK
Khác
- Kết quả bình chọn linh vật Angular dự kiến được công bố tại sự kiện phát hành trên YouTube ngày 20 tháng 11 năm 2025
- Nhóm Angular có kế hoạch tiếp tục phát triển môi trường phát triển ứng dụng web có khả năng mở rộng và độ tin cậy cao thông qua Signal Forms và Angular Aria
- Có thể nâng cấp lên phiên bản mới nhất bằng lệnh
ng update
2 bình luận
Những ngôn ngữ hoặc framework mà hiệu năng của LLM kém thì có phải họ cung cấp máy chủ MCP như vậy để nâng cao chất lượng câu trả lời không?
Hỗ trợ máy chủ MCP chính thức có vẻ khá ổn, không biết React có thứ gì tương tự không