ประกาศ Angular v22

• Angular v22 ขยายเวิร์กโฟลว์ของ AI เอเจนต์ ไปสู่เครื่องมือควบคุม dev server ของ Angular MCP, Angular Agent Skills, WebMCP รุ่นทดลอง และเวิร์กโฟลว์การสร้าง Angular บน Google AI Studio·Gemini Canvas
• โดยมีเป้าหมายเพื่อปรับปรุงเสถียรภาพและความสะดวกในการพัฒนา ได้ยกระดับ Signal Forms, Angular Aria, resource·httpResource จากขั้นทดลอง/พรีวิวสู่สถานะพร้อมใช้งานจริงในโปรดักชัน
• Signal Forms เป็น Declarative Form API ที่ผสานข้อดีของ Reactive Forms, ฟอร์มแบบ strong typing, ฟอร์มแบบ template-driven และความสามารถเชิง reactive ของ signals เข้าด้วยกัน พร้อมทั้งเสริมเอกสาร สะท้อนฟีดแบ็กจากคอมมูนิตี้ และรองรับ Angular Material กับ Angular Aria แล้ว
• การปรับปรุง API และเทมเพลต ครอบคลุมการผสาน Navigation API เข้ากับ Router, การควบคุมการล้างทรัพยากรของ route, @Service และ injectAsync, คอมเมนต์ใน HTML element·spread/rest·การตรวจสอบ @switch·รองรับ arrow function ในเทมเพลต
• Angular v22 เสริม รากฐานสำหรับอนาคต ด้วยการตั้งค่าเริ่มต้นให้แอปใหม่ใช้ OnPush, การเปลี่ยนชื่อ ChangeDetectionStrategy.Eager, แผน developer preview ของ @boundary ในไตรมาส 3 ปี 2026 และการยุติการรองรับสาย Webpack พร้อมโฟกัสไปที่ TSGo

---

ฟีเจอร์ที่ยกระดับสู่สถานะพร้อมใช้งานจริงในโปรดักชัน

• Signal Forms คือ Reactive Form API แบบ reactive·composable·declarative ที่รวมข้อดีของ Reactive Forms, ฟอร์มแบบ strong typing, องค์ประกอบที่นิยมของ template-driven forms และความสามารถเชิง reactive ของ signals
• หลังจากเปิดตัวใน v21 ได้มีการอัปเดต คู่มือ forms บน angular.dev, สะท้อนฟีดแบ็กและอีชชูจากคอมมูนิตี้ และรองรับการทำงานร่วมกับ Angular Material และ Angular Aria
• Angular Aria คือ accessibility primitive ที่ออกแบบมาให้ผู้พัฒนาดูแลสไตล์และ business logic ส่วน UI directives และ patterns จะจัดการเรื่องการเข้าถึงได้ และใน v22 ก็พร้อมใช้งานในโปรดักชันแล้ว
• 12 UI patterns ของ Angular Aria ครอบคลุมรูปแบบการเข้าถึงที่ใช้บ่อย พร้อมทั้งมี API ที่เสถียร รองรับ Signal Forms อย่างสมบูรณ์ และมี test harness
• Async Reactive API ใช้ resource เพื่อจัดการ asynchronous resource ด้วยรูปแบบการใช้งานแบบ signal และใช้ httpResource เพื่อจัดการการดึงข้อมูลผ่าน HTTP ด้วยโมเดลที่ declarative มากขึ้น
• resource และ httpResource สามารถนำไปใช้ในแอปโปรดักชันได้แล้วใน v22 และดูวิธีใช้งานได้จากคู่มือทางการ

การพัฒนา AI และเวิร์กโฟลว์ของเอเจนต์

• Angular v22 ขยายเวิร์กโฟลว์สำหรับแอปพลิเคชันแบบ AI-native ไปยัง 3 ด้าน ได้แก่ เครื่องมือเอเจนต์สำหรับเขียนโค้ด, เครื่องมือเอเจนต์ในเบราว์เซอร์ และแพลตฟอร์มพัฒนา AI
• devserver.wait_for_build ของ Angular MCP ช่วยให้เอเจนต์ build แอปพลิเคชัน ตรวจสอบผลลัพธ์ แล้วตัดสินใจขั้นตอนถัดไปได้ และยังสร้างลูป self-healing จาก code error ใน build log ได้ด้วย
• devserver.start และ devserver.stop ใช้สำหรับเริ่มต้นและหยุด development server โดยเครื่องมือเหล่านี้ถูกยกระดับเป็น stable ใน v22 พร้อมกับเครื่องมือทดสอบและ end-to-end
• Angular MCP กำลังเพิ่มรายการเครื่องมืออย่าง ai_tutor, modernize, onpush_zoneless_migration เพื่อช่วยพัฒนาแอป Angular สมัยใหม่
• angular-developer ของ Angular Agent Skills ให้แนวทางการพัฒนา Angular สมัยใหม่แก่โมเดล รวมถึงฟีเจอร์ใหม่อย่าง Angular Aria และ Signal Forms โดยไฟล์มีความยาวน้อยกว่า 140 บรรทัด และใช้แนวทางเปิดเผยข้อมูลแบบค่อยเป็นค่อยไป โดยโหลดตัวอย่างโค้ดและไฟล์อ้างอิงเมื่อจำเป็น
• angular-new-app ช่วยแนะนำผู้ใช้ที่เพิ่งเริ่มสำรวจ Angular ในสภาพแวดล้อมของเอเจนต์ ให้ตั้งค่าสภาพแวดล้อมการเขียนโค้ด Angular บนเครื่องได้ และ skills นี้ใช้งานได้ในเครื่องมือพัฒนา AI หรือสภาพแวดล้อมเวิร์กโฟลว์ของเอเจนต์ เช่น Antigravity
• Contributor Skills ช่วยให้เข้าใจ mental model ที่จำเป็นต่อการพัฒนาฟีเจอร์ภายใน codebase ของ Angular และมีคุณค่าสำหรับทั้งผู้ที่กำลังเตรียม pull request แรกและสมาชิกทีมที่มีประสบการณ์
• WebMCP รุ่นทดลอง ช่วยให้สร้างและเผยแพร่เครื่องมือแบบมีโครงสร้างสำหรับให้เอเจนต์ใช้ภายในเบราว์เซอร์ ลดความจำเป็นในการโต้ตอบกับ DOM และรองรับการกำหนดเครื่องมือสำหรับทั้งแอป·routes·services รวมถึงการสร้างเครื่องมืออัตโนมัติแบบ dynamic บนพื้นฐานของ Signal Forms
• ดูเอกสารการเชื่อมต่อ WebMCP ได้ที่ angular.dev/ai/webmcp
• Google AI Studio และ Gemini Canvas ช่วยให้ builders ที่ไม่มีพื้นฐานการเขียนโค้ดแบบดั้งเดิมเริ่มต้นโปรเจกต์ที่สร้างด้วย Angular ได้ โดยใน coding sandbox ที่ฝังในเว็บแอป Gemini สามารถสร้างแอปพลิเคชันเต็มรูปแบบในเบราว์เซอร์ได้
• ในเวิร์กโฟลว์ของ Gemini หากระบุ “Angular” ใน prompt ระบบจะสร้างแอป Angular ให้ และหลังจากสร้างแล้วสามารถแก้ไขด้วยตนเองในเบราว์เซอร์ สนทนากับ AI ต่อเพื่อปรับแต่ง หรือขอให้รวมกับ Firebase ได้
• ใน Google AI Studio ก็ใช้เวิร์กโฟลว์คล้ายกันได้ โดยเลือก Angular ใน configuration panel แล้วเริ่ม prompt จากนั้นหลังสร้างเสร็จก็เพิ่มฟีเจอร์ผ่านแชตและต่อไปจนถึงการ deploy ได้

Router และ API สำหรับ dependency injection

• การผสาน Navigation API ทำให้ Router สอดคล้องกับ Navigation API แบบ native ของเบราว์เซอร์ และควบคุมการย้ายหน้าในแอปได้ด้วย boilerplate ที่น้อยลง
• Router สามารถดักจับ navigation request ทั้งหมดได้อัตโนมัติ รวมถึง RouterLink และ standard anchor tag
• ใช้ native scroll behavior เพื่อให้การย้อนกลับ/เดินหน้าพาผู้ใช้ไปยังตำแหน่งที่คาดหวัง โดยไม่ต้องมี custom scroll-management logic และไม่กระทบ bundle size
• เชื่อมกับ native navigation lifecycle ของเบราว์เซอร์โดยตรง จึงจัดการ global loading indicator และ accessibility announcement ที่แม่นยำระหว่าง page transition ได้ง่ายขึ้น
• การควบคุมการล้าง route จัดการหน่วยความจำอย่างชัดเจนมากขึ้นผ่าน 2 ฟีเจอร์คือ withExperimentalAutoCleanupInjectors และ destroyDetachedRouteHandle
• withExperimentalAutoCleanupInjectors จะ destroy dependency injector ที่เชื่อมกับ route ที่ไม่ active แล้วโดยอัตโนมัติ เพื่อเคลียร์ provider และ resource ระดับ route ที่ไม่ได้ใช้งาน
• destroyDetachedRouteHandle คือ public API อย่างเป็นทางการสำหรับ destroy component ภายใน detached route handle อย่างเรียบร้อย เมื่อใช้ custom RouteReuseStrategy
• decorator @Service เข้ามาแทนแพตเทิร์น @Injectable({ providedIn: 'root' }) ใน use case ส่วนใหญ่ ส่วนกรณีที่ต้องการ configuration เชิงลึกกว่าหรือ constructor injection ยังสามารถใช้ @Injectable ต่อไปได้
• injectAsync รองรับ asynchronous dependency injection ของ service เพื่อให้ทำ code splitting และ on-demand loading ได้ โดย service ต้องอยู่ในสถานะ auto-provided ซึ่ง @Service จัดการให้
• ในตัวอย่างของ injectAsync service ReportExporter จะไม่ถูกโหลดจนกว่าจะถูกใช้งานครั้งแรก และยังตั้งค่า prefetch เช่น prefetch: onIdle ได้
• ดูวิธีใช้งานได้จาก เอกสารทางการของ injectAsync
• การปรับปรุงอื่น ๆ ยังรวมถึงความเข้ากันได้เต็มรูปแบบกับ TypeScript 6 และการปรับปรุงประสิทธิภาพของ template pipeline กับ runtime efficiency

ประสบการณ์การเขียนเทมเพลตและการตรวจจับการเปลี่ยนแปลง

• สามารถใช้คอมเมนต์ได้ทั้งในระดับ property และ binding ภายใน HTML element ทำให้เทมเพลตอ่านง่ายและชัดเจนขึ้น และยังรองรับการสลับคอมเมนต์ใน VS Code
• Angular จะ de-duplicate host directive ที่ match กับ element เดียวกันหลายครั้งโดยอัตโนมัติ
• หาก directive match ทั้งจากเทมเพลตและ host directive ระบบจะให้ template match มีลำดับความสำคัญก่อน และจะ merge input/output map ของ host directive
• หาก input หรือ output ถูก expose ภายใต้หลายชื่อ Angular จะเกิด error เพื่อป้องกัน naming conflict
• สามารถใช้ spread/rest syntax ในเทมเพลตได้ และใช้ได้กับ object literal, array literal และ function call
• @switch สามารถให้หลาย @case ใช้ output เดียวกันได้ จึงลด code duplication
• ในบล็อก @switch ที่ใช้ union type หากใช้ @default never; จะได้รับ compile-time error เมื่อยังมีค่าที่ไม่ได้ถูกจัดการ
• inline function ภายในเทมเพลตสามารถใช้ในรูปแบบ arrow function ได้ เหมาะกับฟังก์ชันสั้นและเรียบง่าย โดยมีเงื่อนไขว่าไม่ควรวางฟังก์ชันที่ซับซ้อนหรือใช้เวลารันนานไว้ในเทมเพลต
• สำหรับแอปพลิเคชันใหม่ OnPush จะเป็นกลยุทธ์ change detection เริ่มต้น โดยสอดคล้องกับเป้าหมายเรื่อง zoneless default และ performance by default
• ค่าเริ่มต้นเดิม ChangeDetectionStrategy.Default ถูกเปลี่ยนชื่อเป็น ChangeDetectionStrategy.Eager เพื่อสื่อพฤติกรรมใน change detection cycle ได้ชัดเจนขึ้น

Error boundary, สิ่งที่จะเลิกใช้ และทิศทางในอนาคต

• @boundary คือ API ใหม่สำหรับสร้าง error boundary ภายใน Angular template โดยสามารถ catch error ที่เกิดขึ้นจาก code block ที่ครอบไว้ และกำหนด fallback content ได้
• มีเป้าหมายเพื่อลดปัญหาที่ component ล้มเหลวเพียงจุดเดียวทำให้ทั้งเพจพัง โดยเฉพาะใน flow สำคัญอย่าง checkout ของอีคอมเมิร์ซ
• @boundary มีกำหนดเปิดให้ใช้ในรูปแบบ developer preview ในไตรมาส 3 ปี 2026
• การรองรับ Webpack, builders ของ @angular-devkit/build-angular, @ngtools/webpack เป็นต้น จะเข้าสู่สถานะ deprecated ใน v22
• Angular จะมุ่งเน้นไปที่การรองรับ TSGo ของ application builder และดูรายละเอียด deprecation เพิ่มเติมได้จาก Angular CHANGELOG

[GN⁺]

ความคิดเห็นจาก Hacker News

• กำลังสร้างแอปที่ค่อนข้างซับซ้อนด้วย Angular v21 อยู่ และประสบการณ์ก็ดีมาก เพราะภาระทางความคิดในการสร้างและจัดการคอมโพเนนต์, สถานะ, และการไหลของข้อมูลนั้นต่ำ
  มันง่ายขึ้นมากเพราะ signals และ signal store และทั้งหมดนี้เขียนด้วยมือล้วน ๆ โดยไม่ใช้เครื่องมือ AI สำหรับเขียนโค้ด

• ทุกวันนี้ต้องยอมรับว่า Angular ใช้งานได้สนุกทีเดียว
  น่าเสียดายที่ ecosystem ยังมีส่วนที่หยาบอยู่บ้าง แต่โชคดีที่ฟีเจอร์ที่มีมาให้ในตัวนั้นเยอะมาก

  • ฉันก็มีประสบการณ์แบบเดียวกัน
    อยากให้ Angular เลิกใช้คอมไพเลอร์เฉพาะทางที่ผูกกับ tsc แน่น ๆ แล้วหันไปใช้แนวทางที่เสียบปลั๊กได้มากกว่าและทำงานกับ TypeScript compiler ตัวไหนก็ได้
    เวลา cold build ของแอปและยูนิตเทสต์ก็ยังไม่ค่อยดีนัก แต่พอใช้ coding agent แล้วก็รู้สึกกังวลกับภาระส่วนนั้นน้อยลง
  • สงสัยว่าส่วนไหนของ ecosystem ที่ยังหยาบอยู่
    ไม่เคยมีปัญหาในการหาแพ็กเกจ และแพ็กเกจส่วนใหญ่ก็ดูจะตามแนวทาง signal flow กันได้ดี
  • สงสัยว่าในโปรเจกต์ต่าง ๆ ยังเลือกใช้ของอย่าง RxJS จนโค้ดพอกเป็นชั้น ๆ และดีบักยากอยู่หรือเปล่า
    หรือว่าตอนนี้ ecosystem ของ Angular กลับมามีสติสัมปชัญญะแล้ว

• เมื่อไม่นานนี้เพิ่งอัปเกรดโปรเจกต์ Angular ที่ค่อนข้างซับซ้อนจาก v14 เป็น v21
  แม้หลายปีที่ผ่านมาจะรู้สึกว่าการพัฒนาของ Angular ช้าลง แต่พอมองการเปลี่ยนแปลงระหว่างเวอร์ชันเหล่านั้นรวมกันทีเดียว มันแทบจะให้ความรู้สึกเหมือนเป็นเฟรมเวิร์กใหม่เกือบทั้งหมด

• Angular Aria ดูดีมากจริง ๆ
  เอกสารก็ทำมาดีแม้กระทั่งกรณีใช้งานซับซ้อนอย่าง autocomplete เลยอยากลองใช้เร็ว ๆ ว่าจะเอามาแทน autocomplete สำหรับ screen reader ที่เมื่อก่อนต้องทำเองได้ไหม

  • อาจเป็นฉันที่ดูอะไรผิดไป แต่พอลองใช้งานคีย์บอร์ดที่ https://angular.dev/guide/aria/overview#showcase กลับพบว่ามันตั้งให้เลื่อนด้วย ปุ่มลูกศร แทน tab/shift+tab ที่พบได้ทั่วไปกว่ามาก
    ทั้งที่แท็บในเอกสารของมันเองซึ่งอยู่เหนือเดโมนั้นก็ใช้ tab/shift+tab สำหรับการย้ายโฟกัส

• ฟีเจอร์นี้น่าตื่นเต้นมาก
  อยากใช้ signal-forms และ resources มาตั้งแต่ยังเป็นฟีเจอร์ทดลอง และพอเปลี่ยนมาใช้ signals แล้วก็กลับไปแบบเดิมไม่ได้อีก
  การที่ต้องใช้ RxJS เพราะเรื่องฟอร์มนี่ทรมานมาก

  • สงสัยว่าจะช่วยอธิบายเรื่อง signals เพิ่มได้ไหม
    มันคล้ายกับพาราไดม์ signal ของ game engine อย่าง Godot ที่คอมโพเนนต์สามารถ emit signal แล้วคอมโพเนนต์อื่น subscribe ได้โดยไม่สนความลึกของลำดับชั้นหรือเปล่า หรือว่าเป็นคนละแบบกันไปเลย

• ก่อนยุค React ฉันเคยสนุกกับ Angular และมันก็เป็นช่วงเวลาที่ค่อนข้างดี แต่พูดตรง ๆ ตอนนี้แทบลืมไปแล้วด้วยซ้ำว่า Angular ยังมีอยู่
  ไม่ได้จะชม React นะ ทุกวันนี้จริง ๆ กลับชอบแนวทางแบบ htmx มากกว่า
  แค่รู้สึกว่าการแข่งขันตอนนี้ย้ายไปอยู่ที่ว่าเอเจนต์จะจัดการกับเฟรมเวิร์กหรือภาษาไหนได้ดีกว่า และเครื่องมือระดับ static analysis หรือ compiler จะช่วยจับความผิดพลาดได้มากแค่ไหน

• Angular ให้ความรู้สึกคล้าย Django อยู่หน่อย ๆ ซึ่งทำให้ชอบมัน
  มันใช้งานง่ายเพราะมีทุกอย่างที่ต้องการรวมมาให้แล้ว

  • ก็เลยรู้สึกว่าถ้าอย่างนั้นใช้ Django ไปเลยไม่ดีกว่าเหรอ
    หรือไม่ก็ใช้แบ็กเอนด์ที่เร็วกว่าและมีเทมเพลตกับ server-side rendering แล้วค่อยต่อ htmx เข้าไป ก็อาจได้ประสบการณ์คล้าย single-page app โดยไม่ต้องเจอกับความบ้าคลั่งของ ecosystem JS ที่พังไปหมด

• Angular ทำให้อาชีพสายโปรแกรมมิงของฉันมีความสุข และไม่เคยรู้สึกเหมือนเป็นงานเลย
  ไม่มีอะไรจะดีไปกว่าการได้ทำงานด้วยภาษาที่ชอบ ได้เรียนรู้อีก และยังได้เงินด้วย

• ไม่ได้ใช้ Angular มาสักพักแล้ว
  ในฐานะคนที่ใช้ JavaScript framework อื่นอย่าง Vue, React, Svelte ก็สงสัยว่าตัวเองพลาดอะไรไปบ้าง
  อยากรู้เหตุผลของคนที่เลือก Angular แทนเฟรมเวิร์กใหญ่ตัวอื่น

  • โดยทั่วไปมองว่า Angular เหมาะที่สุดเมื่อ อยากทำแอปพลิเคชันแบบเก่าให้อยู่ในรูปเว็บไซต์
    โดยเฉพาะถ้าไม่ได้ชอบ JavaScript กับการพัฒนาเว็บมากนัก และมองว่าแบ็กเอนด์คือส่วนหลัก

• โครงสร้างอย่าง import {signal} from "@angular/core" กับ import {form} from "@angular/forms/signals" คือ signal มาจาก core แต่ form มาจาก forms/signals
  เหมือนจะมีเหตุผลเชิงคำศัพท์บางอย่างที่ฉันยังไม่เข้าใจ
  นอกเหนือจากนั้นก็ตื่นเต้นที่จะได้กลับมาใช้ Angular อีกครั้งหลังผ่านไป 10 ปี และมันก็ดูดีมาก

  • signals เป็น โครงสร้างข้อมูลพื้นฐาน ของ Angular เลยอยู่ใน core
    ส่วน signal-based forms เป็นส่วนหนึ่งของโมดูล Forms ดังนั้นถ้าไม่ใช้ฟอร์มก็ไม่ต้องแบก overhead ส่วนนั้นมาด้วย
  • Angular มีหลายวิธีในการจัดการฟอร์ม
    อิมพอร์ตนั้นน่าจะเป็นสำหรับ signal-based forms ที่เพิ่งออกมาใหม่