Angular v22 duyuruldu

• Angular v22, yapay zeka ajanı akışlarını Angular MCP'nin geliştirme sunucusu kontrol araçları, Angular Agent Skills, deneysel WebMCP ve Google AI Studio·Gemini Canvas'taki Angular üretim iş akışlarıyla genişletiyor
• Kararlılığı ve geliştirici deneyimini iyileştirmeyi hedefleyerek Signal Forms, Angular Aria, resource ve httpResource özelliklerini deneysel/önizleme aşamasından üretime hazır duruma yükseltiyor
• Signal Forms, Reactive Forms·güçlü tipli formlar·şablon tabanlı formlar·signals reaktivitesini birleştiren bildirimsel bir form API'si; dokümantasyon geliştirmeleri, topluluk geri bildirimleri ve Angular Material ile Angular Aria desteği tamamlandı
• API ve şablon iyileştirmeleri; Router'da Navigation API entegrasyonu, rota kaynaklarının temizlenme denetimi, @Service ve injectAsync, HTML öğesi yorumları·spread/rest·@switch denetimi·şablonda arrow function desteğiyle geliyor
• Angular v22, yeni uygulamalarda varsayılan OnPush, ChangeDetectionStrategy.Eager adlandırma değişikliği, 2026'nın 3. çeyreğinde @boundary geliştirici önizlemesi ve Webpack tabanlı desteğin sonlandırılacak olmasıyla birlikte TSGo odağı üzerinden gelecek temelini güçlendiriyor

---

Üretime hazır duruma gelen özellikler

• Signal Forms, Reactive Forms'un avantajlarını, güçlü tipli formları, şablon tabanlı formların tercih edilen yönlerini ve signals reaktivitesini birleştiren reaktif·bileşenleştirilebilir·bildirimsel bir form API'sidir
• v21'in ardından angular.dev form kılavuzu güncellendi, topluluk geri bildirimleri ve sorunlar işlendi, ayrıca Angular Material ve Angular Aria entegrasyonu desteklenmeye başlandı
• Angular Aria, geliştiricilerin stil ve iş mantığını üstlenirken UI yönergeleri ile kalıpların erişilebilirliği ele alması için tasarlanmış erişilebilirlik primitifleri sunar ve v22 ile üretimde kullanıma hazır hale geldi
• Angular Aria'nın 12 UI kalıbı, yaygın erişilebilirlik kalıplarını kapsıyor; API kararlılığı, Signal Forms için tam destek ve test harness içeriyor
• Asenkron reaktif API'ler, resource ile asenkron kaynakları signal tarzı bir kullanılabilirlikle ele alıyor, httpResource ile de HTTP veri çekmeyi daha bildirimsel bir modelle yönetiyor
• resource ve httpResource, v22 ile üretim uygulamalarında kullanılabiliyor; kullanım biçimi resmi kılavuzda yer alıyor

Yapay zeka geliştirme ve ajan iş akışları

• Angular v22, AI-native uygulamalara yönelik akışları kod yazma ajan araçları, tarayıcı ajan araçları ve yapay zeka geliştirme platformları olmak üzere üç alana genişletiyor
• Angular MCP içindeki devserver.wait_for_build, ajanın uygulamayı derleyip çıktı sonuçlarını inceleyerek sonraki adıma karar vermesini destekliyor; derleme günlüğündeki kod hatalarına dayalı kendi kendini iyileştiren döngüler kurulabiliyor
• devserver.start ve devserver.stop, geliştirme sunucusunu başlatma ve durdurmadan sorumlu; bu araçlar test ve end-to-end araçlarıyla birlikte v22'de stable statüsüne yükseltildi
• Angular MCP, ai_tutor, modernize, onpush_zoneless_migration gibi modern Angular uygulama geliştirmesini destekleyen araç listesini genişletmeye devam ediyor
• Angular Agent Skills içindeki angular-developer, Angular Aria ve Signal Forms gibi güncel özellikleri içeren modern Angular geliştirme yönergelerini modele sunuyor; dosyalar 140 satırın altında tutuluyor ve gerektiğinde kod örnekleriyle referans dosyalarını getiren kademeli açıklama yaklaşımı kullanılıyor
• angular-new-app, ajan ortamında Angular'ı ilk kez keşfeden kullanıcılara yerel Angular kodlama ortamı kurma konusunda rehberlik ediyor; bu skills seti Antigravity gibi yapay zeka geliştirme araçlarında veya ajan iş akışı ortamlarında kullanılabiliyor
• Contributor Skills, Angular codebase'i içinde özellik geliştirmek için gereken zihinsel modeli anlamaya yardımcı oluyor; ilk pull request'ini hazırlayanlar kadar deneyimli ekip üyeleri için de değer taşıyor
• Deneysel WebMCP, ajanların tarayıcı içinde kullanabileceği yapılandırılmış araçlar oluşturup sunmayı sağlayarak DOM etkileşimi ihtiyacını azaltıyor; uygulama geneli·routes·services için araç tanımları ve dynamic Signal Forms tabanlı otomatik araç üretimini destekliyor
• WebMCP entegrasyon belgelerine angular.dev/ai/webmcp üzerinden ulaşılabiliyor
• Google AI Studio ve Gemini Canvas, geleneksel kodlama geçmişi olmayan builder'ların Angular tabanlı projelere başlamasını destekliyor; Gemini web uygulamasındaki yerleşik kod sandbox'ında tarayıcı içinde tam uygulamalar oluşturulabiliyor
• Gemini iş akışında prompt içinde “Angular” belirtildiğinde Angular uygulaması oluşturuluyor; üretimden sonra tarayıcıda elle düzenleme yapılabiliyor, yapay zekayla konuşarak iyileştirme sürdürülebiliyor veya Firebase entegrasyonu istenebiliyor
• Google AI Studio'da configuration panel üzerinden Angular seçilip benzer bir prompt iş akışı başlatılabiliyor; üretim sonrasında sohbet yoluyla özellik eklemek ve dağıtıma kadar ilerlemek mümkün

Router ve bağımlılık enjeksiyonu API'leri

• Navigation API entegrasyonu, Router'ı tarayıcının yerel Navigation API yapısıyla uyumlu hale getirerek daha az boilerplate ile uygulama içi geçiş denetimi sağlıyor
• Router, RouterLink ve standart anchor tag dahil tüm navigation request'lerini otomatik olarak yakalayabiliyor
• Yerel scroll behavior kullanılarak back/forward geçişlerinde kullanıcıların beklediği konuma ulaşması sağlanıyor; özel scroll-management mantığı gerekmiyor ve bundle size üzerinde etkisi bulunmuyor
• Tarayıcının yerel navigation lifecycle'ına doğrudan bağlanarak page transition sırasında global loading indicator ve doğru erişilebilirlik announcement'larını yönetmek kolaylaşıyor
• Rota temizliği denetimi, withExperimentalAutoCleanupInjectors ve destroyDetachedRouteHandle olmak üzere iki özellikle bellek yönetimini daha açık biçimde ele alıyor
• withExperimentalAutoCleanupInjectors, artık aktif olmayan rotalara bağlı dependency injector'ları otomatik olarak destroy ederek boşta kalan rota düzeyi provider ve kaynakları temizliyor
• destroyDetachedRouteHandle, özel RouteReuseStrategy kullanıldığında detached route handle içindeki component'leri temiz biçimde destroy etmek için sunulan resmi public API'dir
• @Service decorator'ı, çoğu kullanım senaryosunda @Injectable({ providedIn: 'root' }) kalıbının yerini alıyor; daha derin yapılandırma veya constructor injection gereken durumlarda @Injectable kullanılmaya devam edilebiliyor
• injectAsync, service'ler için asenkron dependency injection desteği sunarak code splitting ve talep üzerine yüklemeyi mümkün kılıyor; service'in auto-provided durumda olması gerekiyor ve bunu @Service karşılıyor
• injectAsync örneğinde ReportExporter service'i ilk kez kullanılana kadar yüklenmiyor; prefetch: onIdle gibi önceden getirme ayarları da yapılabiliyor
• Kullanım biçimi injectAsync resmi dokümantasyonunda açıklanıyor
• Diğer iyileştirmeler arasında TypeScript 6 ile tam uyumluluk ve template pipeline ile runtime verimliliğinde performans artışları bulunuyor

Şablon yazma deneyimi ve değişiklik algılama

• HTML öğeleri içinde property ve binding düzeyinde yorum kullanılabilmesi, şablon okunabilirliğini ve açıklığını artırıyor; ayrıca VS Code yorum aç/kapat desteği de var
• Angular, aynı öğede birden fazla kez eşleşen host directive'leri otomatik olarak tekilleştiriyor
• Bir directive hem şablonda hem de host directive olarak eşleşirse şablon eşleşmesi öncelikli oluyor; host directive'in input/output haritaları birleştiriliyor
• Bir input veya output birden fazla adla dışa açıldığında Angular hata vererek adlandırma çakışmalarını önlüyor
• Şablonlarda spread/rest syntax kullanılabiliyor; object literal, array literal ve function call üzerinde uygulanabiliyor
• @switch, birden fazla @case bloğunun aynı çıktıyı paylaşmasına izin vererek kod tekrarını azaltıyor
• Union type kullanan @switch bloklarında @default never; kullanılırsa ele alınmamış değerler için derleme zamanında hata alınabiliyor
• Şablon içindeki inline function'lar arrow function biçiminde yazılabiliyor; kısa ve basit fonksiyonlar için uygun, ancak karmaşık veya uzun süren fonksiyonların şablona konmaması şartı korunuyor
• Yeni uygulamalarda varsayılan change detection stratejisi OnPush oluyor; bu tercih zoneless varsayılanı ve varsayılan olarak performans hedefiyle uyumlu
• Önceki varsayılan ChangeDetectionStrategy.Default, change detection cycle içindeki davranışı daha açık göstermek için ChangeDetectionStrategy.Eager olarak yeniden adlandırıldı

Hata sınırları, kullanımdan kaldırmalar ve gelecek yönü

• @boundary, Angular şablonları içinde error boundary uygulamak için gelen yeni API'dir; kapsadığı kod bloğundan yükselen hataları yakalayıp fallback content tanımlamaya imkân verir
• Amaç, e-ticaret checkout gibi kritik akışlarda tek bir component hatasının tüm sayfayı çökertmesi sorununu azaltmaktır
• @boundary, 2026'nın 3. çeyreğinde developer preview olarak sunulacak
• Webpack desteği, @angular-devkit/build-angular builder'ları ve @ngtools/webpack gibi bileşenler v22 ile deprecated durumuna geçti
• Angular, application builder için TSGo desteğine odaklanıyor; daha ayrıntılı kullanımdan kaldırma bilgileri Angular CHANGELOG içinde bulunabilir

[GN⁺]

Hacker News görüşleri

• Angular v21 ile oldukça karmaşık bir uygulama geliştiriyorum; bileşenleri, durumu ve veri akışını oluşturup yönetmenin bilişsel yükü düşük olduğu için deneyim gerçekten çok iyiydi
  signal ve signal store sayesinde işler çok kolaylaştı ve her şeyi AI kodlama araçları olmadan, tamamen elle yazdım

• Bu günlerde Angular kullanması keyif veren bir seviyeye gelmiş durumda, bunu kabul ediyorum
  Ekosistemin biraz pürüzlü olması üzücü ama neyse ki kutudan çıkan özellikler fazlasıyla zengin

  • Ben de aynı deneyimi yaşadım
    Angular'ın tsc'ye sıkı sıkıya bağlı olan o tuhaf derleyiciyi bırakıp, herhangi bir TypeScript derleyicisiyle çalışabilen daha eklenti dostu bir yaklaşıma geçmesini isterdim
    Uygulama ve birim testleri için cold build süreleri hâlâ pek iyi değil ama kodlama ajanları kullanınca bu yük biraz daha az önemseniyor
  • Ekosistemde tam olarak neyin pürüzlü olduğunu merak ediyorum
    Paket bulma konusunda hiç sorun yaşamadım ve paketlerin çoğu da signal akışını gayet iyi takip ediyor gibi görünüyor
  • Projelerin hâlâ RxJS gibi şeyleri seçip kodun katman katman birikmesine ve debug etmenin işkenceye dönüşmesine yol açıp açmadığını merak ediyorum
    Yoksa Angular ekosistemine artık sağduyu geri mi döndü, onu merak ediyorum

• Kısa süre önce oldukça karmaşık bir Angular projesini v14'ten v21'e yükselttim
  Birkaç yıldır Angular geliştirmesinin yavaşladığı hissi vardı ama o sürümler arasındaki değişikliklere topluca bakınca neredeyse tamamen yeni bir framework gibi geliyor

• Angular Aria gerçekten çok iyi görünüyor
  Otomatik tamamlama gibi karmaşık senaryolar için bile dokümantasyon çok iyi hazırlanmış; eskiden elle yapmak zorunda kaldığım ekran okuyucu dostu autocomplete'in yerini alıp alamayacağını denemek için sabırsızlanıyorum

  • Yanlış gördüğüm bir şey mi var bilmiyorum ama https://angular.dev/guide/aria/overview#showcase üzerinde klavyeyle gezinmeyi deneyince, çok daha yaygın olan tab/shift+tab yerine ok tuşlarıyla gezinilecek şekilde ayarlanmış
    Hatta o örneğin hemen üstündeki kendi dokümantasyon sekmeleri bile odak geçişi için tab/shift+tab kullanıyor

• Bu özellik beni gerçekten heyecanlandırıyor
  Deneysel olduğu dönemden beri signal-forms ve resources kullanmak istiyordum; signal'a geçtikten sonra geri dönmek mümkün olmadı
  Formlar yüzünden RxJS kullanmak zorunda olmak büyük bir sıkıntıydı

  • Signal konusunda biraz daha açıklama yapabilecek biri var mı diye merak ediyorum
    Godot gibi oyun motorlarındaki signal paradigmasına, yani bileşenlerin derinlikten bağımsız şekilde signal yayıp başka bileşenlerin buna abone olmasına benzer bir şey mi, yoksa tamamen farklı mı, merak ediyorum

• React'ten önce Angular'ı keyifle kullanıyordum ve o dönemler gayet iyiydi ama dürüst olmak gerekirse artık Angular'ın var olduğunu bile neredeyse unutmuş durumdayım
  React'i övmeye çalışmıyorum; hatta bugünlerde htmx yaklaşımı daha çok hoşuma gidiyor
  Yine de rekabet sanki artık hangi framework veya dili ajanların daha iyi kullandığına ve statik analiz ya da derleyici düzeyindeki araçların hataları ne kadar yakalayabildiğine kaymış gibi

• Angular'ın biraz Django havası vermesini seviyorum
  İhtiyacın olan her şey içinde geliyor, bu yüzden kullanması kolay

  • İnsan "doğrudan Django kullansan olmaz mı" diye düşünüyor
    Ya da şablonlar ve server-side rendering sunan daha hızlı bir backend kullanıp yanına htmx ekleyerek, gerçekten bozulmuş JS ekosisteminin deliliğine girmeden tek sayfa uygulaması benzeri bir deneyim elde edebilirsin

• Angular sayesinde programlama kariyerim keyifli geçti ve hiçbir zaman iş gibi hissettirmedi
  Sevdiğin bir dilde çalışmaktan, daha çok öğrenmekten ve bunun için para almaktan daha iyi bir şey yok

• Bir süredir Angular kullanmıyorum
  Vue, React, Svelte gibi diğer JavaScript framework'lerini kullanan biri olarak neyi kaçırdığımı merak ediyorum
  İnsanların diğer büyük framework'ler yerine Angular'ı seçme nedenlerini merak ediyorum

  • Genel olarak Angular'ın eski tarz uygulamaları web sitesi olarak yapmak istediğinde en iyi uyum sağladığını düşünüyorum
    Özellikle JavaScript'i ve web geliştirmeyi çok sevmiyorsan ve asıl işin backend tarafı olduğunu düşünüyorsan iyi uyuyor

• import {signal} from "@angular/core" ve import {form} from "@angular/forms/signals" örneklerinde olduğu gibi, signal core'dan gelirken form forms/signals içinden geliyor
  Sanırım benim anlamadığım terminolojik bir sebep var
  Bunun dışında, 10 yıl sonra Angular'ı yeniden kullanma fikri heyecan verici ve oldukça iyi görünüyor

  • Signal, Angular'ın temel veri yapısı olduğu için core içinde yer alıyor
    Signal tabanlı formlar ise Forms modülünün bir parçası; bu yüzden form kullanmıyorsan o ek yükü de almıyorsun
  • Angular'da formları ele almanın birçok yolu var
    Muhtemelen bu import, yeni gelen signal tabanlı formları içe aktarmak için var