Angular v22 diumumkan

 (blog.angular.dev)
2 poin oleh GN⁺ 3 jam lalu | 1 komentar | Bagikan ke WhatsApp
  • Angular v22 memperluas alur agen AI ke alat kontrol dev server Angular MCP, Angular Agent Skills, WebMCP eksperimental, serta alur kerja pembuatan Angular di Google AI Studio dan Gemini Canvas
  • Dengan tujuan meningkatkan stabilitas dan kemudahan pengembangan, Signal Forms, Angular Aria, serta resource·httpResource dinaikkan dari tahap eksperimen/pratinjau menjadi siap produksi
  • Signal Forms adalah API form deklaratif yang menggabungkan Reactive Forms, form bertipe kuat, form berbasis template, dan reaktivitas signals; dokumentasinya telah diperkuat, umpan balik komunitas telah diterapkan, dan dukungan Angular Material serta Angular Aria telah selesai
  • Peningkatan API dan template mencakup integrasi Navigation API pada Router, kontrol pembersihan resource rute, dukungan @Service dan injectAsync, komentar elemen HTML·spread/rest·pemeriksaan @switch·fungsi panah di template
  • Angular v22 memperkuat fondasi masa depan dengan menjadikan OnPush sebagai default untuk aplikasi baru, mengganti nama ChangeDetectionStrategy.Eager, menyiapkan pratinjau pengembang @boundary pada kuartal 3 2026, serta merencanakan penghentian dukungan keluarga Webpack dan fokus pada TSGo

Fitur yang naik menjadi siap produksi

  • Signal Forms adalah API form yang reaktif, dapat dikomposisikan, dan deklaratif, menggabungkan keunggulan Reactive Forms, form bertipe kuat, elemen-elemen yang disukai dari form berbasis template, dan reaktivitas signals
  • Sejak rilis v21, panduan form di angular.dev telah diperbarui, umpan balik dan isu dari komunitas telah ditindaklanjuti, serta integrasi dengan Angular Material dan Angular Aria kini didukung
  • Angular Aria adalah primitive aksesibilitas yang dirancang agar pengembang menangani styling dan logika bisnis, sementara direktif dan pola UI menangani aksesibilitas; pada v22 statusnya menjadi siap digunakan di produksi
  • 12 pola UI Angular Aria mencakup pola aksesibilitas umum, disertai stabilisasi API, dukungan penuh untuk Signal Forms, dan test harness
  • API reaktif asinkron memungkinkan resource menangani resource asinkron dengan kegunaan bergaya signal, dan httpResource menangani pengambilan data HTTP dengan model yang lebih deklaratif
  • resource dan httpResource kini dapat digunakan pada aplikasi produksi di v22, dan cara penggunaannya dapat dilihat di panduan resmi

Pengembangan AI dan alur kerja agen

  • Angular v22 memperluas alur untuk aplikasi AI-native ke tiga area: alat agen untuk menulis kode, alat agen di browser, dan platform pengembangan AI
  • devserver.wait_for_build di Angular MCP membantu agen membangun aplikasi dan meninjau hasil output untuk menentukan langkah berikutnya, serta dapat membentuk loop pemulihan mandiri berdasarkan error kode di log build
  • devserver.start dan devserver.stop bertugas memulai dan menghentikan dev server, dan alat-alat ini bersama alat testing dan end-to-end dipromosikan menjadi stable di v22
  • Angular MCP terus menambah daftar alat seperti ai_tutor, modernize, dan onpush_zoneless_migration untuk membantu pengembangan aplikasi Angular modern
  • angular-developer dari Angular Agent Skills memberi model panduan pengembangan Angular modern, termasuk fitur terbaru seperti Angular Aria dan Signal Forms; file-nya kurang dari 140 baris dan menggunakan pendekatan pengungkapan bertahap yang memuat contoh kode dan file referensi saat dibutuhkan
  • angular-new-app membantu pengguna yang baru pertama kali mengeksplorasi Angular di lingkungan agen untuk menyiapkan lingkungan coding Angular lokal; skills ini dapat digunakan di alat pengembangan AI seperti Antigravity atau lingkungan alur kerja agen
  • Contributor Skills membantu memahami mental model yang dibutuhkan untuk mengembangkan fitur di dalam codebase Angular, dan bermanfaat baik bagi orang yang menyiapkan pull request pertama maupun anggota tim yang berpengalaman
  • WebMCP yang masih eksperimental memungkinkan pembuatan dan pemaparan alat terstruktur untuk digunakan agen di dalam browser, mengurangi kebutuhan interaksi DOM, serta mendukung definisi alat untuk seluruh aplikasi·routes·services dan pembuatan alat otomatis dinamis berbasis Signal Forms
  • Dokumentasi integrasi WebMCP tersedia di angular.dev/ai/webmcp
  • Google AI Studio dan Gemini Canvas membantu builder tanpa latar belakang coding tradisional untuk memulai proyek berbasis Angular, dan sandbox coding bawaan di aplikasi web Gemini memungkinkan pembuatan aplikasi penuh langsung di browser
  • Dalam alur kerja Gemini, jika prompt menyebut “Angular”, aplikasi Angular akan dibuat; setelah itu, pengguna dapat mengeditnya secara manual di browser, terus berdialog dengan AI untuk menyempurnakannya, atau meminta integrasi Firebase
  • Di Google AI Studio, alur kerja serupa dapat digunakan dengan memilih Angular di configuration panel lalu memulai prompt; setelah pembuatan, pengguna dapat menambahkan fitur lewat chat hingga berlanjut ke deployment

Router dan API dependency injection

  • Integrasi Navigation API menyelaraskan Router dengan Navigation API native browser untuk memberikan kontrol perpindahan aplikasi dengan boilerplate yang lebih sedikit
  • Router dapat secara otomatis mencegat semua navigation request, termasuk RouterLink dan tag anchor standar
  • Dengan memanfaatkan native scroll behavior, perpindahan back/forward dapat membawa pengguna ke posisi yang mereka harapkan, tanpa logika custom scroll-management dan tanpa dampak pada ukuran bundle
  • Keterhubungan langsung ke native navigation lifecycle browser mempermudah penanganan global loading indicator dan pengumuman aksesibilitas yang akurat selama page transition
  • Kontrol pembersihan rute menangani manajemen memori secara lebih eksplisit melalui dua fitur: withExperimentalAutoCleanupInjectors dan destroyDetachedRouteHandle
  • withExperimentalAutoCleanupInjectors secara otomatis menghancurkan dependency injector yang terhubung ke rute yang tidak lagi aktif, untuk membersihkan provider dan resource tingkat rute yang sedang idle
  • destroyDetachedRouteHandle adalah API publik resmi untuk menghancurkan komponen di dalam detached route handle secara bersih saat menggunakan RouteReuseStrategy kustom
  • Decorator @Service menggantikan pola @Injectable({ providedIn: 'root' }) untuk sebagian besar use case, sementara @Injectable tetap dapat digunakan jika dibutuhkan konfigurasi yang lebih dalam atau constructor injection
  • injectAsync mendukung dependency injection asinkron pada service sehingga memungkinkan code splitting dan on-demand loading, dan service harus berada dalam status auto-provided, yang ditangani oleh @Service
  • Dalam contoh injectAsync, service ReportExporter tidak dimuat sampai pertama kali digunakan, dan konfigurasi prefetch seperti prefetch: onIdle juga dimungkinkan
  • Cara penggunaan dapat dilihat di dokumentasi resmi injectAsync
  • Peningkatan lainnya mencakup kompatibilitas penuh dengan TypeScript 6 serta peningkatan performa pada template pipeline dan efisiensi runtime

Pengalaman menulis template dan change detection

  • Komentar kini dapat digunakan pada level property dan binding di dalam elemen HTML sehingga meningkatkan keterbacaan dan kejelasan template, serta mendukung comment toggling di VS Code
  • Angular secara otomatis menghapus duplikasi host directive yang cocok lebih dari sekali pada elemen yang sama
  • Jika directive cocok baik di template maupun host directive, kecocokan dari template diprioritaskan, dan peta input/output dari host directive akan digabungkan
  • Jika input atau output diekspos dengan beberapa nama, Angular akan memunculkan error untuk mencegah konflik penamaan
  • Syntax spread/rest kini bisa digunakan di template dan dapat diterapkan pada object literal, array literal, dan function call
  • @switch memungkinkan beberapa @case berbagi output yang sama untuk mengurangi duplikasi kode
  • Pada blok @switch yang menggunakan union type, penggunaan @default never; dapat memunculkan compile-time error jika masih ada nilai yang belum ditangani
  • Fungsi inline di dalam template dapat digunakan dalam bentuk arrow function, cocok untuk fungsi yang singkat dan sederhana, dengan syarat fungsi yang kompleks atau berjalan lama tidak diletakkan di template
  • Pada aplikasi baru, OnPush menjadi strategi change detection default, sejalan dengan target zoneless default dan performance by default
  • Default lama, ChangeDetectionStrategy.Default, kini berganti nama menjadi ChangeDetectionStrategy.Eager agar perilakunya dalam change detection cycle lebih jelas

Error boundary, deprecation, dan arah ke depan

  • @boundary adalah API baru untuk mengimplementasikan error boundary di dalam template Angular, yang dapat menangkap error dari blok kode yang dibungkus dan menentukan fallback content
  • Tujuannya adalah mengurangi masalah ketika kegagalan satu komponen merusak seluruh halaman, misalnya pada alur berisiko tinggi seperti checkout e-commerce
  • @boundary dijadwalkan hadir sebagai developer preview pada kuartal 3 2026
  • Dukungan Webpack, builder @angular-devkit/build-angular, @ngtools/webpack, dan lainnya menjadi deprecated di v22
  • Angular berfokus pada dukungan TSGo untuk application builder, dan informasi deprecation lebih lanjut dapat dilihat di Angular CHANGELOG

Bacaan terkait

1 komentar

 
GN⁺ 3 jam lalu
Komentar Hacker News

  • Saya sedang membangun aplikasi yang cukup kompleks dengan Angular v21, dan pengalamannya sangat bagus karena beban kognitif untuk membuat serta mengelola komponen, state, dan aliran data terasa rendah
    Berkat signals dan signal store, semuanya jadi sangat mudah, dan saya menulis semuanya manual tanpa alat coding AI

  • Akhir-akhir ini saya jadi mengakui bahwa Angular sekarang benar-benar menyenangkan untuk digunakan
    Memang ekosistemnya sedikit kasar, tetapi untungnya fitur bawaan yang disediakan sangat banyak

    • Saya juga punya pengalaman yang sama
      Saya berharap Angular meninggalkan kompiler unik yang sangat terikat ke tsc, lalu beralih ke pendekatan yang lebih dapat dipasang sebagai plugin dan bisa dipakai dengan kompiler TypeScript apa pun
      Waktu cold build untuk aplikasi dan unit test masih kurang bagus, tetapi kalau memakai coding agent, beban itu jadi sedikit tidak terlalu terasa
    • Saya penasaran bagian mana dari ekosistemnya yang terasa kasar
      Saya belum pernah kesulitan mencari paket, dan sebagian besar paket juga sudah mengikuti alur signal dengan baik
    • Saya penasaran apakah proyek-proyek masih memilih hal seperti RxJS sehingga kodenya menumpuk berlapis-lapis dan debugging jadi menyiksa
      Atau apakah ekosistem Angular sekarang akhirnya sudah kembali waras

  • Baru-baru ini saya menaikkan proyek Angular yang cukup kompleks dari v14 ke v21
    Selama beberapa tahun sempat terasa seperti pengembangan Angular melambat, tetapi kalau melihat perubahan di antara versi-versi itu sekaligus, rasanya hampir seperti framework yang benar-benar baru

  • Angular Aria terlihat sangat bagus
    Dokumentasinya lengkap bahkan untuk skenario kompleks seperti autocomplete, jadi saya tidak sabar mencobanya untuk melihat apakah ini bisa menggantikan autocomplete ramah screen reader yang dulu harus saya buat sendiri

    • Mungkin saya salah lihat, tetapi saat mencoba navigasi keyboard di https://angular.dev/guide/aria/overview#showcase, mereka mengaturnya agar bernavigasi dengan tombol panah alih-alih tab/shift+tab yang jauh lebih umum
      Bahkan tab dokumentasi mereka sendiri tepat di atas contoh itu memakai tab/shift+tab untuk perpindahan fokus

  • Fitur ini benar-benar sangat saya nantikan
    Sejak masih eksperimental saya sudah ingin memakai signal-forms dan resources, dan setelah beralih ke signal saya merasa tidak bisa kembali lagi
    Harus memakai RxJS hanya demi form benar-benar menyakitkan

    • Saya penasaran apakah ada yang bisa menjelaskan lebih jauh tentang signal
      Apakah ini mirip paradigma signal di game engine seperti Godot, di mana komponen bisa mengirim signal dan komponen lain berlangganan tanpa memandang kedalaman, atau apakah ini sesuatu yang sepenuhnya berbeda

  • Sebelum React, saya senang memakai Angular dan masa itu cukup bagus, tetapi jujur sekarang saya hampir lupa bahwa Angular itu masih ada
    Ini bukan untuk memuji React, dan belakangan saya justru lebih suka pendekatan htmx
    Hanya saja rasanya persaingan sekarang bergeser ke framework atau bahasa mana yang lebih baik ditangani agent, dan seberapa jauh analisis statis atau alat tingkat kompiler bisa menangkap kesalahan

  • Saya suka Angular karena terasa agak seperti Django
    Semua yang dibutuhkan sudah termasuk, jadi mudah dipakai

    • Rasanya bukankah lebih baik langsung memakai Django saja
      Atau memakai backend yang lebih cepat dengan template dan server-side rendering, lalu menambahkan htmx, sehingga bisa mendapatkan pengalaman seperti aplikasi satu halaman tanpa kegilaan ekosistem JS yang memang sudah rusak

  • Berkat Angular, karier pemrograman saya terasa menyenangkan dan sama sekali tidak seperti kerja
    Tidak ada yang lebih baik daripada bekerja dengan bahasa yang saya sukai, terus belajar lebih banyak, dan dibayar untuk itu

  • Sudah lama saya tidak memakai Angular
    Sebagai orang yang memakai framework JavaScript lain seperti Vue, React, dan Svelte, saya penasaran apa yang saya lewatkan
    Saya ingin tahu alasan orang memilih Angular dibanding framework besar lainnya

    • Secara umum saya melihat Angular paling cocok ketika Anda ingin membuat aplikasi model lama menjadi website
      Terutama jika Anda tidak terlalu suka JavaScript dan pengembangan web, serta menganggap backend sebagai bagian utama

  • Seperti import {signal} from "@angular/core" dan import {form} from "@angular/forms/signals", strukturnya adalah signal berasal dari core sedangkan form berasal dari forms/signals
    Sepertinya ada alasan terminologi yang tidak saya pahami
    Selain itu, saya antusias mencoba lagi Angular setelah 10 tahun, dan kelihatannya cukup bagus

    • Signal adalah struktur data dasar di Angular, jadi ada di core
      Form berbasis signal adalah bagian dari modul Forms, jadi kalau Anda tidak memakai form, Anda tidak perlu membawa overhead itu
    • Ada banyak cara menangani form di Angular
      Kemungkinan itu adalah import untuk form berbasis signal yang baru