Công bố Angular v22

• Angular v22 mở rộng luồng AI agent sang các công cụ điều khiển dev server của Angular MCP, Angular Agent Skills, WebMCP thử nghiệm, và quy trình tạo Angular trong Google AI Studio·Gemini Canvas
• Với mục tiêu cải thiện độ ổn định và trải nghiệm phát triển, phiên bản này đưa Signal Forms, Angular Aria, resource·httpResource từ giai đoạn thử nghiệm/preview lên trạng thái sẵn sàng cho production
• Signal Forms là API biểu mẫu khai báo kết hợp Reactive Forms, biểu mẫu kiểu mạnh, biểu mẫu dựa trên template, và tính phản ứng của signals; đồng thời đã hoàn tất việc củng cố tài liệu, phản ánh phản hồi cộng đồng, và hỗ trợ Angular Material cùng Angular Aria
• Các cải tiến về API và template bao gồm tích hợp Navigation API cho Router, kiểm soát dọn dẹp tài nguyên route, hỗ trợ @Service và injectAsync, comment trong phần tử HTML·spread/rest·kiểm tra @switch·hàm mũi tên trong template
• Angular v22 củng cố nền tảng tương lai với mặc định OnPush cho ứng dụng mới, đổi tên ChangeDetectionStrategy.Eager, developer preview của @boundary vào quý 3/2026, và kế hoạch ngừng hỗ trợ hệ Webpack để tập trung vào TSGo

---

Các tính năng đã đạt trạng thái sẵn sàng cho production

• Signal Forms là API biểu mẫu phản ứng, có thể kết hợp và mang tính khai báo, kết hợp ưu điểm của Reactive Forms, biểu mẫu kiểu mạnh, các yếu tố được ưa chuộng của biểu mẫu dựa trên template, và tính phản ứng của signals
• Sau khi phát hành v21, nhóm đã cập nhật hướng dẫn forms trên angular.dev, phản ánh phản hồi và issue từ cộng đồng, đồng thời hỗ trợ tích hợp Angular Material và Angular Aria
• Angular Aria là các primitive trợ năng được thiết kế để nhà phát triển tập trung vào style và business logic, còn UI directives và pattern sẽ xử lý phần accessibility; trong v22, nó đã sẵn sàng cho sử dụng production
• 12 UI pattern của Angular Aria bao phủ các mẫu trợ năng phổ biến, có API ổn định, hỗ trợ đầy đủ Signal Forms, và đi kèm test harness
• API phản ứng bất đồng bộ cho phép xử lý tài nguyên bất đồng bộ bằng trải nghiệm sử dụng kiểu signal qua resource, và xử lý lấy dữ liệu HTTP theo mô hình khai báo hơn qua httpResource
• resource và httpResource có thể dùng trong ứng dụng production từ v22, và cách sử dụng có thể xem trong hướng dẫn chính thức

Phát triển AI và quy trình agent

• Angular v22 mở rộng các luồng dành cho ứng dụng AI-native sang ba mảng: công cụ agent để viết mã, công cụ agent trong trình duyệt, và nền tảng phát triển AI
• devserver.wait_for_build của Angular MCP hỗ trợ agent build ứng dụng và xem xét kết quả đầu ra để quyết định bước tiếp theo, đồng thời có thể tạo vòng lặp tự chữa lỗi dựa trên lỗi mã trong log build
• devserver.start và devserver.stop đảm nhiệm việc khởi động và dừng dev server; các công cụ này cùng với công cụ test và end-to-end đã được nâng lên stable trong v22
• Angular MCP đang tiếp tục mở rộng danh sách công cụ hỗ trợ phát triển ứng dụng Angular hiện đại như ai_tutor, modernize, onpush_zoneless_migration
• angular-developer trong Angular Agent Skills cung cấp cho mô hình hướng dẫn phát triển Angular hiện đại, bao gồm các tính năng mới như Angular Aria và Signal Forms; tệp này dưới 140 dòng và dùng cách công bố dần để tải code sample cùng file tham chiếu khi cần
• angular-new-app hướng dẫn người dùng lần đầu khám phá Angular trong môi trường agent thiết lập môi trường lập trình Angular cục bộ; các skills này có thể dùng trong công cụ phát triển AI như Antigravity hoặc môi trường quy trình agent
• Contributor Skills giúp hiểu mental model cần thiết để phát triển tính năng bên trong codebase Angular, có giá trị cho cả người chuẩn bị pull request đầu tiên lẫn thành viên giàu kinh nghiệm
• WebMCP thử nghiệm cho phép tạo và công bố các công cụ có cấu trúc để agent dùng ngay trong trình duyệt, giảm nhu cầu tương tác với DOM, đồng thời hỗ trợ định nghĩa công cụ cho toàn bộ ứng dụng·routes·services và tự động tạo công cụ động dựa trên Signal Forms
• Tài liệu tích hợp WebMCP có tại angular.dev/ai/webmcp
• Google AI Studio và Gemini Canvas hỗ trợ các builder không có nền tảng lập trình truyền thống bắt đầu dự án dựa trên Angular; trong sandbox lập trình tích hợp của ứng dụng web Gemini, có thể tạo toàn bộ ứng dụng ngay trong trình duyệt
• Trong quy trình Gemini, chỉ cần chỉ định “Angular” trong prompt là ứng dụng Angular sẽ được tạo; sau đó có thể chỉnh sửa thủ công trong trình duyệt, tiếp tục trao đổi với AI để tinh chỉnh, hoặc yêu cầu tích hợp Firebase
• Trong Google AI Studio, có thể dùng quy trình tương tự bằng cách chọn Angular trong configuration panel rồi bắt đầu prompt; sau khi tạo xong, có thể thêm tính năng qua chat và tiếp tục đến bước triển khai

Router và API tiêm phụ thuộc

• Tích hợp Navigation API giúp Router đồng bộ với Navigation API gốc của trình duyệt, cho phép kiểm soát việc di chuyển trong ứng dụng với ít boilerplate hơn
• Router có thể tự động chặn mọi navigation request, bao gồm RouterLink và các thẻ anchor chuẩn
• Nó tận dụng native scroll behavior để người dùng quay lại đúng vị trí mong đợi khi back/forward, không cần custom scroll-management logic và cũng không ảnh hưởng đến bundle size
• Việc kết nối trực tiếp với navigation lifecycle gốc của trình duyệt cũng giúp xử lý global loading indicator và accessibility announcement chính xác hơn trong quá trình chuyển trang
• Kiểm soát dọn dẹp route xử lý quản lý bộ nhớ theo cách tường minh hơn với hai tính năng withExperimentalAutoCleanupInjectors và destroyDetachedRouteHandle
• withExperimentalAutoCleanupInjectors tự động destroy dependency injector gắn với route không còn active, dọn dẹp các provider và resource ở cấp route đang idle
• destroyDetachedRouteHandle là public API chính thức để destroy gọn gàng component trong detached route handle khi dùng RouteReuseStrategy tùy chỉnh
• Decorator @Service thay thế mẫu @Injectable({ providedIn: 'root' }) trong hầu hết trường hợp sử dụng; nếu cần cấu hình sâu hơn hoặc constructor injection thì vẫn có thể tiếp tục dùng @Injectable
• injectAsync hỗ trợ tiêm phụ thuộc bất đồng bộ cho service, cho phép code splitting và tải theo nhu cầu; service phải ở trạng thái auto-provided và @Service xử lý điều đó
• Trong ví dụ injectAsync, service ReportExporter sẽ không được tải cho đến lần đầu được dùng, và cũng có thể cấu hình prefetch như prefetch: onIdle
• Cách sử dụng có thể xem trong tài liệu chính thức về injectAsync
• Các cải tiến khác bao gồm tương thích đầy đủ với TypeScript 6 và cải thiện hiệu năng ở template pipeline cùng runtime efficiency

Trải nghiệm viết template và change detection

• Có thể dùng comment ở mức property và binding trong phần tử HTML, giúp tăng tính dễ đọc và rõ ràng cho template, đồng thời hỗ trợ cả tính năng comment toggling trong VS Code
• Angular tự động loại bỏ trùng lặp các host directive khớp nhiều lần trên cùng một phần tử
• Nếu một directive khớp ở cả template và host directive thì phần khớp từ template được ưu tiên, còn input/output map của host directive sẽ được gộp lại
• Nếu một input hoặc output được expose dưới nhiều tên, Angular sẽ phát sinh lỗi để ngăn xung đột đặt tên
• Có thể dùng cú pháp spread/rest trong template, áp dụng cho object literal, array literal và function call
• @switch cho phép nhiều @case chia sẻ cùng một output để giảm trùng lặp mã
• Trong block @switch dùng union type, nếu dùng @default never; thì sẽ nhận được compile-time error khi còn giá trị chưa được xử lý
• Hàm inline trong template có thể dùng dưới dạng arrow function; phù hợp với các hàm ngắn và đơn giản, còn hàm phức tạp hoặc chạy lâu thì không nên đặt trong template
• Trong ứng dụng mới, OnPush là chiến lược change detection mặc định, phù hợp với mục tiêu zoneless by default và performance by default
• Mặc định cũ ChangeDetectionStrategy.Default được đổi tên thành ChangeDetectionStrategy.Eager để thể hiện rõ hơn hành vi trong chu kỳ change detection

Error boundary, nội dung sắp bị loại bỏ và định hướng tiếp theo

• @boundary là API mới để triển khai error boundary trong template Angular, có thể bắt lỗi phát sinh từ code block được bao quanh và chỉ định nội dung fallback
• Mục tiêu là giảm tình trạng một component lỗi làm sập toàn bộ trang trong các luồng quan trọng như thanh toán thương mại điện tử
• @boundary dự kiến được cung cấp dưới dạng developer preview vào quý 3 năm 2026
• Webpack support, các builder của @angular-devkit/build-angular, @ngtools/webpack và các thành phần liên quan đều chuyển sang trạng thái deprecated trong v22
• Angular sẽ tập trung vào hỗ trợ TSGo cho application builder; thông tin deprecation chi tiết hơn có trong Angular CHANGELOG

[GN⁺]

Ý kiến trên Hacker News

• Tôi đang xây một ứng dụng khá phức tạp bằng Angular v21, và trải nghiệm rất tốt vì gánh nặng nhận thức khi tạo và xử lý component, state và luồng dữ liệu khá thấp
  Nhờ signals và signal store mà mọi thứ trở nên rất dễ, và tôi viết tay toàn bộ mà không dùng công cụ AI hỗ trợ lập trình

• Dạo này phải công nhận Angular đã đạt đến mức dùng rất thích
  Hệ sinh thái hơi thô ráp một chút thì đáng tiếc, nhưng bù lại may là tính năng tích hợp sẵn cực kỳ nhiều

  • Tôi cũng có trải nghiệm tương tự
    Tôi chỉ mong Angular bỏ trình biên dịch khá lạ vốn gắn chặt với tsc, và chuyển sang cách tiếp cận mang tính plug-in hơn, có thể dùng với bất kỳ trình biên dịch TypeScript nào
    Thời gian cold build cho ứng dụng và unit test vẫn chưa tốt lắm, nhưng nếu dùng coding agent thì gánh nặng đó cũng bớt đáng bận tâm hơn
  • Tôi tò mò không biết hệ sinh thái đang thô ráp ở điểm nào
    Tôi chưa từng gặp vấn đề khi tìm package, và đa số package cũng đang bám khá tốt theo luồng signal
  • Tôi tự hỏi liệu các dự án vẫn còn chọn thứ như RxJS khiến code chồng lớp lên nhau và việc debug trở nên khổ sở hay không
    Hay là giờ hệ sinh thái Angular cũng đã tỉnh táo trở lại rồi

• Gần đây tôi đã nâng một dự án Angular khá phức tạp từ v14 lên v21
  Có cảm giác vài năm qua tốc độ phát triển của Angular đã chậm lại, nhưng khi nhìn toàn bộ thay đổi giữa các phiên bản đó cùng một lúc thì nó gần như giống một framework hoàn toàn mới

• Angular Aria trông thực sự rất tuyệt
  Tài liệu được viết rất tốt, kể cả cho các kịch bản phức tạp như autocomplete, nên tôi rất muốn sớm thử xem nó có thể thay thế phần autocomplete dành cho screen reader mà trước đây tôi phải tự làm hay không

  • Có thể là tôi đã nhìn nhầm gì đó, nhưng khi thử thao tác bàn phím ở https://angular.dev/guide/aria/overview#showcase thì họ lại để điều hướng bằng phím mũi tên thay vì tab/shift+tab vốn phổ biến hơn nhiều
    Thậm chí ngay phía trên ví dụ đó, các tab trong chính tài liệu của họ lại dùng tab/shift+tab để chuyển focus

• Tôi thực sự rất mong chờ tính năng này
  Từ khi còn là tính năng thử nghiệm tôi đã muốn dùng signal-forms và resources, và một khi đã chuyển sang signal thì không thể quay lại được nữa
  Việc phải dùng RxJS chỉ vì forms là một nỗi đau lớn

  • Tôi muốn nghe giải thích thêm một chút về signal
    Không biết nó có giống mô hình signal trong các game engine như Godot, nơi component phát signal và các component khác đăng ký nhận bất kể độ sâu, hay là một thứ hoàn toàn khác

• Trước thời React tôi từng dùng Angular rất thích và đó là một giai đoạn khá ổn, nhưng thành thật mà nói thì giờ tôi gần như quên mất Angular vẫn còn tồn tại
  Cũng không phải để khen React, vì dạo này tôi lại thích cách làm của htmx hơn
  Chỉ là giờ có cảm giác cạnh tranh đã chuyển sang chuyện agent xử lý framework hay ngôn ngữ nào tốt hơn, và các công cụ phân tích tĩnh hoặc ở mức compiler có thể bắt lỗi giúp được bao nhiêu

• Tôi thích Angular vì nó hơi giống Django
  Mọi thứ cần thiết đều có sẵn nên dùng rất dễ

  • Tôi lại thấy có lẽ cứ dùng Django luôn là được
    Hoặc dùng một backend nhanh hơn có template và server-side rendering, rồi gắn thêm htmx vào để có trải nghiệm gần như ứng dụng một trang mà không cần chịu cơn điên của hệ sinh thái JS vốn đã hỏng thực sự

• Nhờ Angular mà sự nghiệp lập trình của tôi trở nên vui vẻ, và hoàn toàn không có cảm giác như đang đi làm
  Không có gì tuyệt hơn việc được làm bằng ngôn ngữ mình thích, học thêm được nhiều thứ, lại còn được trả tiền

• Tôi đã không dùng Angular một thời gian rồi
  Với tư cách là người dùng các framework JavaScript khác như Vue, React, Svelte, tôi tò mò không biết mình đang bỏ lỡ điều gì
  Tôi muốn biết lý do vì sao mọi người chọn Angular thay vì các framework lớn khác

  • Nhìn chung tôi thấy Angular hợp nhất khi muốn biến một ứng dụng kiểu cũ thành website
    Đặc biệt phù hợp nếu bạn không quá thích JavaScript và phát triển web, và xem backend mới là phần chính

• Kiểu như import {signal} from "@angular/core" và import {form} from "@angular/forms/signals", tức là signal thì đến từ core còn form thì đến từ forms/signals
  Có vẻ như có một lý do về mặt thuật ngữ nào đó mà tôi chưa hiểu
  Ngoài chuyện đó ra thì tôi khá háo hức được dùng lại Angular sau 10 năm, và nó trông khá ổn

  • Signal là cấu trúc dữ liệu nền tảng của Angular nên nó nằm trong core
    Form dựa trên signal là một phần của module Forms, nên nếu không dùng form thì bạn cũng không phải mang theo phần overhead đó
  • Angular có nhiều cách để xử lý form
    Có lẽ đây là import để lấy form dựa trên signal mới ra mắt