Angular v22 Duyuruldu: Signal Forms, Asenkron Reaktivite ve Yapay Zeka Ajanları Dönemi
Bugün, Angular v22'nin kararlı sürümünü duyurmaktan büyük bir heyecan duyuyoruz. Her büyük sürümde olduğu gibi, modern web geliştirme süreçlerini daha kararlı, ergonomik ve performanslı hale getirmek için çalışmaya devam ediyoruz.
Angular v22, geleceğin web uygulamalarını inşa edebileceğiniz sarsılmaz ve sağlam bir temel sunuyor. Bu sürümle birlikte geliştirici üretkenliğini artıran şablon yeniliklerinden, yapay zeka ajanlarına yönelik çığır açıcı entegrasyonlara kadar birçok harika özellik geliyor. Gelin, Angular v22 ile hayatımıza giren yeniliklere birlikte göz atalım.
Üretime Hazır (Stable) Statüsüne Geçen Dev Özellikler
Angular ekibi olarak yeni özellikleri toplulukla buluştururken genellikle deneysel (experimental) veya geliştirici önizlemesi (developer preview) aşamalarından geçiririz. Bu süreç, geri bildirimleri toplamak ve en kararlı yapıyı sunmak için kritik öneme sahiptir. Bu sürümde, topluluktan aldığımız geri bildirimler doğrultusunda olgunlaşan ve artık üretime hazır (stable) statüye geçen üç büyük API bulunuyor: Signal Forms, Angular Aria ve Asenkron Reaktivite (Asynchronous Reactivity) API'leri.
1. Signal Forms: Birleştirilebilir, Reaktif ve Kararlı
Signal Forms; reaktif formların sunduğu esnekliği, güçlü tipli formların güvenliğini ve şablon tabanlı formların geliştirici dostu yapısını sinyallerin (signals) gücüyle bir araya getiren yeni nesil form yönetim sistemimizdir. v21 sürümündeki ilk duyurusundan bu yana Google içindeki ve dışındaki büyük ekiplerden aldığımız geri bildirimlerle Signal Forms'u üretime hazır hale getirdik:
* Eksiksiz Dokümantasyon: angular.dev üzerinde ayrıntılı kılavuzlar yayına alındı. * Topluluk Düzeltmeleri: Geliştiriciler tarafından bildirilen hata ve performans sorunları giderildi. * Entegrasyonlar: Angular Material ve Angular Aria ile tam uyumluluk sağlandı.
Aşağıda özel doğrulama (custom validation) ve şablon bağlamaları içeren modern bir form yapısını inceleyebilirsiniz:
/
* Signal Forms ile Ödeme Formu Örneği
/
import { Component, signal } from "@angular/core";
import { form } from "@angular/forms/signals";
@Component({
selector: 'app-payment',
imports: [FormField],
templateUrl: './app-payment.html',
})
export class PaymentComponent {
readonly paymentModel = signal({
paymentType: '',
amount: 0
});
readonly f = form(this.paymentModel,
schema => {
required(schema.paymentType, {
message: 'Bu alanın doldurulması zorunludur.'
});
});
}
<!-- app-payment.html -->
<form>
<section>
<label for="payment-type">Ödeme Yöntemi:</label>
<select id="payment-type" [formField="f.paymentType">
<option value="">Bir yöntem seçin...</option>
<option value="credit">Kredi Kartı</option>
<option value="paypal">Paypal / Ödeme Servisi</option>
</select>
@if (f.paymentType().invalid() && f.paymentType().touched()) {
<p class="error">
@for (error of f.paymentType().errors(); track error.kind) {
<span>{{ error.message }}</span>
}
</p>
}
</section>
<button type="submit" [disabled="f().invalid()">Ödemeyi Tamamla</button>
</form>2. Angular Aria: Herkes İçin Erişilebilir Arayüzler
Web, erişim yöntemi ne olursa olsun (klavye, fare, ekran okuyucu) tüm kullanıcılar içindir. Angular Aria, geliştiricilerin bileşenlerin görsel stillerini ve iş mantığını yönetirken, erişilebilirlik (a11y) standartlarını Angular'a bırakmasını sağlayan bir yaklaşımdır. v22 ile birlikte Angular Aria bünyesindeki 12 farklı erişilebilirlik deseni resmi olarak kararlı (stable) statüye geçti.
* Stabilize edilen API'ler ve giderilen topluluk hataları. * Signal Forms ile tam uyumlu yapı. * Test süreçleri için kullanıma sunulan özel test araçları (test harnesses).
3. Asenkron Reaktivite: Sinyaller Asenkron Dünyayla Buluşuyor
Sinyallerin gücünü senkron sınırların ötesine taşımak, Angular ekosisteminde yeni bir çığır açtı. resource API'si, geliştiricilerin standart senkron sinyal yapısını korurken, asenkron programlamanın bloklamayan yapısından faydalanmasını sağlar.
/
* resource API ile Hava Durumu Tahmini Örneği
*/
import { resource, signal, computed } from '@angular/core';
const selectedCity = signal('Chicago');
const weatherResource = resource({
params: () => ({ city: selectedCity() }),
loader: ({ params }) => fetchWeatherForecast(params.city),
});
const currentTemperature = computed(() => {
if (weatherResource.hasValue()) {
return ;
}
return 'Hava durumu yükleniyor...';
});Asenkron veri çekme işlemlerini daha da basitleştirmek adına, HTTP üzerinden deklaratif veri yüklemeyi sağlayan httpResource API'si de bu sürümle kararlı hale geldi. httpResource, otomatik olarak bağlı sinyalleri izler ve istekleri günceller:
/
* httpResource ile Deklaratif Veri Çekme Örneği
*/
import { signal, httpResource } from '@angular/core';
export class WeatherComponent {
selectedCity = signal('Chicago');
weather = httpResource<{ temperature: number; condition: string }>(() => {
return ;
});
changeCity(newCity: string) {
this.selectedCity.set(newCity);
}
}Yapay Zeka Ajanları ve Geliştirme Platformları
Angular, yapay zeka destekli (AI-native) uygulamalar için mükemmel bir zemin sunar. Bu sürümde otonom yapay zeka ajanlarının Angular uygulamalarını daha hızlı ve doğru şekilde geliştirebilmesi için kritik adımlar attık.
Model Context Protocol (MCP) Desteği
Yazılım geliştirme süreçlerinde Google Antigravity gibi otonom kodlama ortaklarının (agents) kullanımı arttıkça, bu ajanların geliştirme sunucusuyla etkileşim kurabilmesi önemli hale geldi. angular-cli MCP sunucusunu şu kararlı araçlarla güncelledik:
* devserver.wait_for_build: Yapay zeka ajanlarının uygulamayı programlı olarak derlemesini ve çıktıyı analiz etmesini sağlar. Hata durumunda ajanın kendi kendini düzelten (self-healing) döngülere girmesine olanak tanır.
* devserver.start & devserver.stop: Geliştirme sunucusunu kontrol etmeye yarayan ajan dostu komutlar.
Angular Ajan Yetenekleri (Agent Skills)
Yapay zeka modellerinin eğitim verileri her zaman en son Angular API güncellemelerini içermeyebilir. Bu açığı kapatmak için AI asistanlarına anında bağlam sağlayan Angular Agent Skills'i duyuruyoruz:
1. angular-developer: Modelin Signal Forms ve Angular Aria gibi modern desenlerde en iyi pratikleri uygulamasına yardımcı olur. "Kademeli açıklama" (progressive disclosure) yöntemi sayesinde dosyalar oldukça hafiftir ve sadece ihtiyaç duyulduğunda derin referansları çeker.
2. angular-new-app: Angular dünyasına yeni adım atan yapay zeka ajanlarına yerel ortam kurulumu konusunda rehberlik eder.
Deneysel WebMCP
Tarayıcı içinde çalışan yapay zeka ajanlarının web uygulamasıyla doğrudan konuşabilmesini sağlayan WebMCP deneysel desteğini duyuruyoruz. WebMCP sayesinde yapay zeka asistanları, karmaşık DOM manipülasyonlarına gerek duymadan uygulama rotaları, servisler ve Signal Forms'tan otomatik üretilen araçlarla doğrudan etkileşime geçebilir.
AI Geliştirme Platformları Entegrasyonu
Google AI Studio ve Gemini Canvas ile entegrasyonumuzu güçlendirerek, kodlama geçmişi olmayan "üreticilerin" (builders) fikirlerini Angular ile hayata geçirmesini kolaylaştırdık:
* Tarayıcı İçi Sandbox: Gemini web uygulamasında prompt kısmında "Angular" belirterek çalışan tam teşekküllü uygulamaları doğrudan tarayıcıda prototipleyebilirsiniz. AI Studio "Vibe Coding": Yapılandırma panelinden Angular'ı seçerek basit bir dille isteklerinizi iletmeniz (örneğin: "Flash kartlar içeren bir matematik öğrenme uygulaması yap"*) çalışan bir Angular projesi elde etmek için yeterlidir.
Güçlü API İyileştirmeleri
Angular Router Yenilikleri
* Yerel Navigation API Desteği: Rota yönetimini tarayıcının yerel Navigation API'siyle uyumlu hale getiren withExperimentalPlatformNavigation() yapılandırması sunuldu. Bu sayede yerel scroll davranışları, sayfa geçişlerindeki yükleme göstergeleri ve a11y duyuruları ek bundle yükü getirmeden yönetilir.
* Injector Temizliği (withExperimentalAutoCleanupInjectors()): Rota seviyesinde sağlanan servislerin, kullanıcı rotadan ayrıldığında otomatik olarak yok edilmesini (destroy) sağlayarak bellek sızıntılarının (memory leak) önüne geçer.
* destroyDetachedRouteHandle: Özel RouteReuseStrategy kullananlar için önbellekteki bileşenleri güvenle yok eden resmi bir API sağlar.
import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withExperimentalPlatformNavigation } from '@angular/router';
bootstrapApplication(AppComponent, {
providers: [
provideRouter(appRoutes, withExperimentalPlatformNavigation())
]
});Yeni @Service Dekoratörü
Global tekil (singleton) servisleri tanımlamak için kullanılan @Injectable({ providedIn: 'root' }) kalıbının yerine daha temiz ve okunabilir bir alternatif olan @Service dekoratörü tanıtıldı.
import { Service } from '@angular/core';
@Service()
export class BasicDataStore {
private data: string[] = [];
addData(item: string): void {
this.data.push(item);
}
getData(): string[] {
return [...this.data];
}
}Asenkron Bağımlılık Enjeksiyonu (injectAsync)
Uygulamanın başlangıç boyutunu küçültmek amacıyla servislerin de lazy loading (tembel yükleme) ile yüklenebilmesini sağlayan injectAsync API'si eklendi. Bu sayede servisler yalnızca ilk kullanıldıklarında dinamik olarak içe aktarılır (import):
import { Component, injectAsync } from '@angular/core';
@Component({
selector: 'app-report',
template: ,
})
export class ReportComponent {
private exporter = injectAsync(() => import('./report-exporter'));
async export() {
const exporter = await this.exporter();
exporter.export();
}
}Dilerseniz prefetch: onIdle parametresiyle servisleri tarayıcı boşta kaldığında otomatik olarak önceden de yükleyebilirsiniz.
Şablon (Template) Seviyesinde Yaşam Kalitesi
Geliştiricilerin şablon yazma deneyimini iyileştiren önemli güncellemeler:
HTML Öğelerinde Yorum Desteği: Artık şablon içerisindeki öğelerin özellik (attribute) ve bağlama seviyelerinde // ve / */ kullanarak yorum satırları yazabilirsiniz.
* Host Directive Tekilleştirme: Aynı eleman üzerinde birden fazla kez eşleşen host direktifleri Angular tarafından otomatik olarak tekilleştirilir.
* Spread ve Rest (...) Desteği: Şablon içerisindeki nesne, dizi ve fonksiyon çağrılarında spread operatörü kullanılabilir hale geldi.
* Çoklu @case Eşleşmesi ve Exhaustive Checks: Rapor durumları gibi birden fazla @case ifadesi artık tek bir çıktı bloğunu paylaşabilir. Ayrıca @default never; ile tüm durumların ele alındığı derleme aşamasında doğrulanabilir.
* Arrow Fonksiyon Desteği: Şablon içerisinde basit ve kısa fonksiyonları arrow function sözdizimiyle doğrudan tanımlayabilirsiniz.
Değişiklik Algılama (changeDetection) Güncellemeleri
1. OnPush Artık Varsayılan: Yeni oluşturulan uygulamalarda OnPush reaktif stratejisi artık varsayılan olarak gelir (zoneless desteğiyle paralel olarak). Bu sayede bileşen dekoratöründe bunu belirtme ihtiyacı ortadan kalkar.
2. Default Stratejisi Eager Oldu: Eski varsayılan olan ChangeDetectionStrategy.Default ismi, zihinsel modeli netleştirmek amacıyla ChangeDetectionStrategy.Eager olarak güncellendi.
Hata Sınırları: @boundary (Ön İzleme)
Şablon içerisindeki beklenmeyen çökmelerin tüm sayfayı etkilemesini önlemek amacıyla hata sınırları (error boundaries) şablon düzeyine taşınıyor:
<section>
<!-- Widget çökse dahi sayfa çalışmaya devam eder ve yedek bileşen gösterilir -->
@boundary {
<app-promotional-widget />
}
@error (let err) {
<app-default-promo-widget />
}
<app-cart-summary />
<app-checkout-flow />
</section>@boundary yapısının Q3 2026'da geliştirici önizlemesine açılması planlanıyor.
Deprecations (Kullanımdan Kaldırılanlar)
Modern derleme süreçlerine odaklanma planımız kapsamında Webpack desteği, @angular-devkit/build-angular builder'ları ve @ngtools/webpack v22 ile birlikte kullanımdan kaldırılmıştır (deprecated). Derleme süreçlerinde yeni TSGo entegrasyonlu modern uygulama derleyicisine odaklanıyoruz.
---
Angular v22, sunduğu güçlü yeniliklerle geleceğin web uygulamalarını geliştirmek için mükemmel bir launch pad (fırlatma rampası) görevi üstleniyor.
Yeni sürümle gelen özellikleri denemek ve projelerinizi güncellemek için angular.dev adresindeki güncel kılavuzları inceleyebilirsiniz.
