Not — HttpClient & v21: Toplulukta “Angular 21 ile HttpClient’ın temel kullanım için varsayılan olarak sağlanacağı” yönünde paylaşımlar var. Ancak resmî dokümantasyonda bugün itibarıyla “sağlayıcı gereksizdir” garantisi bulunmuyor; gelişmiş yapılandırmalar (SSR için withFetch, fonksiyonel interceptor’lar, XSRF vb.) zaten provideHttpClient() üzerinden yapılmaya devam ediyor. Bu nedenle yazıda HttpClient’ı “özelleştirme gerektiğinde sağlayıcıyla yapılandır” ilkesinde ele alıyoruz.

Neden “Roadmap” önemli?

Angular’ın yol haritası, hazır olma ilkesine dayanır; tarihler değişebilir, kademeli benimseme teşvik edilir. Resmî roadmap’i buradan takip edebilirsin. angular.dev/roadmap

Bugün üretimde kullanabilecekler (Stable)

1) Signals — Stable

Signals; durumun nerede/nasıl kullanıldığını izleyerek yeniden işleme maliyetini azaltır, daha kestirilebilir bir reaktivite modeli sunar. Kapsamlı rehber ve “essentials” girişleri:

// counter.signal.ts
import { signal, computed } from '@angular/core';
export const count = signal(0);
export const doubled = computed(() => count() * 2);
// bir yerde:
count.update(n => n + 1);

Hızlı fayda: Bileşen içi local state’i signals’a taşıyın; derived state için computed kullanın. RxJS ile köprü gerekiyorsa toSignal/toObservable yardımcılarını kullanın.

2) Yeni Control Flow — `@if`, `@for`, `@switch` (Stable)

Yeni kontrol akışı şablona gömülü; CommonModule importu gerekmiyor. Mevcut projeleri otomatik dönüştürmek için şematik:

ng generate @angular/core:control-flow

<!-- inventory.component.html -->
@if (items().length === 0) {
  <p>Stok boş.</p>
} @else {
  <ul>
    @for (p of items(); track p.id) {
      <li>{{ p.name }} - {{ p.price | currency }}</li>
    }
  </ul>
}

İpucu: @for içinde track zorunlu; DOM yeniden oluşturmayı azaltır ve stabilite sağlar.

3) SSR + Hydration + Incremental Hydration — Stable

Angular 20 ile rota düzeyi render modu ve incremental hydration kararlı hâle getirildi. Incremental Hydration; sayfanın kritik bölgelerini önce canlandırarak TTI’yi iyileştirir.

// main.ts (istemci)
import { bootstrapApplication, provideClientHydration, withIncrementalHydration } 
  from '@angular/platform-browser';
bootstrapApplication(AppComponent, {
  providers: [ provideClientHydration(withIncrementalHydration()) ],
});

Kılavuzlar: Hydration ve Incremental Hydration.

4) Rota düzeyi render modları — Stable

Her route için Client (CSR), Prerender (SSG) veya Server (SSR) seçebilirsin. Konfigürasyon @angular/ssr ile yapılır.

// app.routes.server.ts
import { provideServerRendering, withRoutes, ServerRoute, RenderMode } from '@angular/ssr';
const serverRoutes: ServerRoute[] = [
  { path: '',            renderMode: RenderMode.Prerender }, // ana sayfa
  { path: 'product/:id', renderMode: RenderMode.Server },    // dinamik, kritik rota
  { path: '**',          renderMode: RenderMode.Server }
];
export const serverProviders = [
  provideServerRendering(withRoutes(serverRoutes)),
];

“Bugün projeye alırken risk/ödül oranını değerlendir.”

Resource API (experimental): Asenkron veriyi (ör. HTTP sonucu) sinyallerle yönetmek için tek tip bir model.
Kaynak: Resource API — referans · Resource — rehber

Not: Signal-based Forms üzerine toplulukta deneysel çalışmalar var; resmi dokümantasyonda formlar şimdilik klasik iki yaklaşımda (reactive/template-driven) anlatılır.
Kaynak: Forms — overview

Yakından takip et (Deneysel)

Resource API — Experimental

Asenkron veriyi (ör. HTTP sonucu) sinyallerle yönetmek için tek tip model. resource/Resource hâlen experimental; API yüzeyi değişebilir.

import { resource, computed, Signal } from '@angular/core';
const userId: Signal<string> = getUserId();
export const userRes = resource({
  params: () => ({ id: userId() }),
  loader: ({ params }) => fetch(`/api/users/${params.id}`).then(r => r.json()),
});
export const firstName = computed(() => userRes.hasValue() ? userRes.value().firstName : undefined);

Zoneless — Stable (v20.2)

v20.0’da Developer Preview olan Zoneless; v20.2 ile stable. Artık zone.js’siz uygulamalar üretimde daha rahat ele alınabiliyor. (Yeni uygulamalar hâlen “varsayılan olarak zoneless” değil; provider ile opt-in.)
Kanıtlar: Angular ekibinin v20 duyurusu (DP) ve v20.2’de “promote to stable” commit/kayıtları ve güvenilir özetler.

Başlangıç adımı: zone.js polyfill’lerini kaldırın, ardından provideZonelessChangeDetection() ile etkinleştirin. Uygulamada zone kirliliğini (gereksiz CD tetikleri) azaltmak için de best-practices dokümanına göz atın.
Kaynaklar: Zoneless guide · 20.2’de “Zoneless stable” özeti

Kademeli benimseme planı (3 adım)

1) Envanter çıkar
Kritik rotalar (SEO/dönüşüm), ağır bileşenler, büyük listeler; ölçümler: TTFB, LCP, INP, CLS.

2) Mikro-POC yap

Bir bileşende local state’i Signals ile yeniden yaz.
Büyük listede @for + track dene.
Tek rota için RenderMode.Server ve istemcide Incremental Hydration’ı devreye al.

3) Aşamalı yayılım

Şablonlar: *ngIf/*ngFor → @if/@for (şematikle). Angular
Rotalar: kritik sayfaları SSR/Prerender, kalanını CSR. Angular
İstemci: withIncrementalHydration() ile “kullanıcıya yakın” bölgeler önce.

Sık düşülen noktalar

@for içinde track atlanmamalı; aksi halde gereksiz DOM değişimleri olur.
SSR kurulumunda tüm rotaları server’a almak yerine rota bazlı strateji uygulayın.
Resource API experimental; geniş mimari kararları bağlamadan önce küçük POC ile doğrulayın.

HttpClient ve v21’e dair not

Topluluk videosu “Angular 21 ile HttpClient’ın varsayılan sağlanacağı” mesajını veriyor; ancak resmî http setup hâlâ “özelleştirme gerektiğinde provideHttpClient() kullanın” şeklinde. SSR’de withFetch() tavsiye ediliyor; interceptors için fonksiyonel yaklaşım (withInterceptors). Bu başlık için resmî rehber ve referansları izleyin.
Resmî rehberler: Http setup (provideHttpClient) · Interceptors (fonksiyonel) · withFetch

Mini POC’ler (kopyala-yapıştır)

Incremental Hydration — hızlı başlangıç

import { bootstrapApplication, provideClientHydration, withIncrementalHydration } 
  from '@angular/platform-browser';
bootstrapApplication(AppComponent, {
  providers: [ provideClientHydration(withIncrementalHydration()) ],
});

Rota düzeyi render modları — örnek kurulum

import { provideServerRendering, withRoutes, ServerRoute, RenderMode } from '@angular/ssr';
const serverRoutes: ServerRoute[] = [
  { path: '',            renderMode: RenderMode.Prerender },
  { path: 'product/:id', renderMode: RenderMode.Server },
  { path: '**',          renderMode: RenderMode.Server },
];
export const serverProviders = [ provideServerRendering(withRoutes(serverRoutes)) ];

Control Flow şematiği — tüm projeyi dönüştür

ng generate @angular/core:control-flow

Kaynaklar (resmî dokümanlar & duyurular)

Angular Roadmap: https://angular.dev/roadmap
Signals rehberi: https://angular.dev/guide/signals
Control Flow: https://angular.dev/guide/templates/control-flow
Geçiş şeması: https://angular.dev/reference/migrations/control-flow
SSR/Hybrid Rendering ve RenderMode: https://angular.dev/guide/ssr
Hybrid overview: https://angular.dev/guide/hybrid-rendering
Hydration: https://angular.dev/guide/hydration
Incremental Hydration: https://angular.dev/guide/incremental-hydration
Resource API (experimental): https://angular.dev/api/core/Resource
Resource rehberi: https://angular.dev/guide/signals/resource
Forms genel bakış: https://angular.dev/guide/forms
Sürümler & sürümleme: https://angular.dev/reference/releases
Ana sayfa (v20): https://angular.dev/