Angular 19 Zoneless: Zone.js Olmadan Performans ve Change Detection Mimarisi

Angular zoneless change detection, standalone component'lerin tanitilmasindan bu yana framework'teki en kapsamli mimari donusumu temsil etmektedir. Zone.js katmaninin tamamen kaldirilmasi sayesinde Angular uygulamalari yaklasik 33KB daha kucuk bundle boyutu, yuzde 30-40 oraninda daha az gereksiz change detection dongusu ve Zone'a ozgu katmanlardan arinmis temiz stack trace'ler elde etmektedir. Bu degisim yalnizca bir performans iyilestirmesi degil, Angular'in reaktivite modelinin temelinden yeniden yapilandirilmasidir.

Zone.js Change Detection Mekanizmasi Nasil Calisir

Zoneless mimarinin avantajlarini kavrayabilmek icin once Zone.js mekanizmasinin isleyisini anlamak gerekmektedir. Zone.js, tarayicidaki tum asenkron API'leri monkey-patch yontemiyle sarar: setTimeout, setInterval, Promise.then, addEventListener, XMLHttpRequest ve daha onlarcasini. Bu API'lerden herhangi biri tamamlandiginda Zone.js, Angular'i bilgilendirir ve Angular tum bilesen agaci uzerinde change detection dongusunu baslatir.

Bu yaklasimin temel bir kusuru bulunmaktadir: Zone.js, uygulama durumunun gercekte degisip degismedigini bilemez. Yalnizca animasyon zamanlama amacli kullanilan bir setTimeout bile tam kapsamli bir change detection dongusunu tetikler. Yuzlerce bilesen iceren buyuk uygulamalarda bu ek yuk olculebilir seviyeye ulasmaktadir.

import { ApplicationConfig } from '@angular/core';
import { provideZoneChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    // Zone.js patches ~130+ browser APIs
    // Every async callback triggers change detection
  ]
};

Angular 14 ile tanitian event coalescing ozelligi, birden fazla olayi tek bir change detection dongusunde birlestirerek ek yuku bir olcude azaltir. Ancak sorunun temeli degismez: change detection, gercekte gerekli olandan cok daha sik calisir.

Angular 19 ve 20'de Zoneless Change Detection Etkinlestirme

Gecis yolu, kullanilan Angular surumune gore farklilik gostermektedir. Angular 19 deneysel API'yi kullanirken, Angular 20 kararli surumu sunmaktadir.

import { ApplicationConfig } from '@angular/core';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideExperimentalZonelessChangeDetection(),
    // No more Zone.js patching
  ]
};

import { ApplicationConfig } from '@angular/core';
import { provideZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideZonelessChangeDetection(),
  ]
};

Provider degisikliginin ardindan angular.json dosyasindaki hem build hem de test hedeflerinde polyfills dizisinden zone.js kaldirilmali ve paket sistemden kaldirmalidir:

# Remove zone.js polyfill from angular.json build and test targets
# Then uninstall the package
npm uninstall zone.js

Bundle boyutundaki azalma aninda gorulur: Zone.js, istekli yukleme sirasinda yaklasik 33KB ham (10KB gzip) boyutunda kod kaplamaktadir.

Zoneless Modda Change Detection'i Ne Tetikler

Zone.js'in her asenkron islemi yakalamasi ortadan kalktiginda, Angular acik bildirimlere dayanir. Framework, asagidaki kosullardan herhangi biri gerceklestiginde change detection'i zamanlar:

• Template'te okunan bir signal degerini gunceller
• ChangeDetectorRef.markForCheck() cagirilir (AsyncPipe tarafindan otomatik olarak)
• Bir bilesen girdisi ComponentRef.setInput() ile degisir
• Template veya host listener geri cagrisi calisir (click, input vb.)
• Onceden kirli (dirty) olarak isaretlenmis bir gorunum bilesen agacina eklenir

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div class="counter">
      <button (click)="decrement()">-</button>
      <span>{{ count() }}</span>
      <button (click)="increment()">+</button>
      <p>Double: {{ doubled() }}</p>
    </div>
  `
})
export class CounterComponent {
  // Signal updates automatically notify the template
  count = signal(0);
  doubled = computed(() => this.count() * 2);

  increment() {
    this.count.update(v => v + 1);
    // No markForCheck() needed - signal handles notification
  }

  decrement() {
    this.count.update(v => v - 1);
  }
}

Signal'ler, zoneless modun dogal tamamlayicisidir. Bir signal degeri degistiginde Angular, hangi template'lerin bu degere bagimli oldugunu tam olarak bilir ve yalnizca ilgili gorunumler icin hedefli change detection zamanlar. Bu yaklasim, Zone.js'in tum agaci tarayan kaba taneli mekanizmasindan temel olarak farklidir.

Mevcut Uygulamalarin Gecisi: Sik Karsilasilan Sorunlar

Zone.js'ten zoneless moda gecis, mevcut uygulamalar icin nadiren tek satirlik bir degisikliktir. Zone.js'in ortuk davranisina dayanan bircok desen, acik mudahale gerektirmektedir.

setTimeout ve setInterval Artik Guncelleme Tetiklemiyor

Zone.js modunda setTimeout geri cagrilari otomatik olarak change detection tetikler. Zoneless modda ise bu durum gecerli degildir.

@Component({
  selector: 'app-user-status',
  template: `<span>{{ statusMessage }}</span>`
})
export class UserStatusComponent {
  statusMessage = 'Loading...';

  ngOnInit() {
    setTimeout(() => {
      // Zone.js would trigger CD here - zoneless does NOT
      this.statusMessage = 'Ready';
    }, 2000);
  }
}

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-user-status',
  template: `<span>{{ statusMessage() }}</span>`
})
export class UserStatusComponent {
  statusMessage = signal('Loading...');

  ngOnInit() {
    setTimeout(() => {
      // Signal update notifies Angular automatically
      this.statusMessage.set('Ready');
    }, 2000);
  }
}

Reactive Forms Acik Bildirim Gerektirir

Zoneless modda FormControl.setValue() veya patchValue() araciligiyla yapilan form durum degisiklikleri otomatik olarak change detection tetiklemez. Bu sorunu cozmek icin iki yaklasim bulunmaktadir: form observable'larini markForCheck() ile iliskilendirmek veya form verilerini signal'ler araciligiyla sunmak.

import { Component, inject, signal } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { toSignal } from '@angular/core/rxjs-interop';
import { debounceTime, distinctUntilChanged } from 'rxjs';

@Component({
  selector: 'app-search',
  imports: [ReactiveFormsModule],
  template: `
    <input [formControl]="searchControl" placeholder="Search..." />
    <p>Results for: {{ searchTerm() }}</p>
  `
})
export class SearchComponent {
  searchControl = new FormControl('');

  // Convert observable to signal for automatic template updates
  searchTerm = toSignal(
    this.searchControl.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged()
    ),
    { initialValue: '' }
  );
}

Zone.js Olmadan Sunucu Tarafi Rendering (SSR)

Zoneless Angular ile SSR, ozel dikkat gerektiren bir alandir. Zone.js, daha once Angular'in uygulamanin serializasyon icin uygun "kararli" bir duruma ulasip ulasmadigini belirlemesine yardimci oluyordu. Zone.js olmadan bu gorevi PendingTasks servisi ustlenmektedir.

import { Component, inject, signal } from '@angular/core';
import { PendingTasks } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { firstValueFrom } from 'rxjs';

@Component({
  selector: 'app-data-loader',
  template: `
    @if (data()) {
      <div>{{ data()!.title }}</div>
    } @else {
      <div>Loading...</div>
    }
  `
})
export class DataLoaderComponent {
  private http = inject(HttpClient);
  private pendingTasks = inject(PendingTasks);
  data = signal<{ title: string } | null>(null);

  ngOnInit() {
    // PendingTasks.run() prevents SSR serialization until complete
    this.pendingTasks.run(async () => {
      const result = await firstValueFrom(
        this.http.get<{ title: string }>('/api/data')
      );
      this.data.set(result);
    });
  }
}

PendingTasks kullanilmadigi takdirde Angular, asenkron veri yuklemesi tamamlanmadan sayfayi serializasyona alir ve istemciye bos icerik gonderir. Bu durum ozellikle SEO acisidan kritik sayfalarda ciddi sorunlara yol acmaktadir.

Performans Karsilastirmasi: Zone.js ve Zoneless

Zone.js'in kaldirilmasiyla elde edilen performans kazanimlari uc kategoride degerlendirilmektedir:

| Metrik | Zone.js | Zoneless | Iyilestirme | |--------|---------|----------|-------------| | Baslangic bundle boyutu | +33KB ham / +10KB gzip | 0KB ek yuk | Yuzde 100 azalma | | Change detection dongusu (tipik uygulama) | Etkilesim basina 150-300 | Etkilesim basina 5-15 | Yuzde 80-95 daha az | | Stack trace derinligi | 8-12 ek Zone karesi | Temiz yerel izler | Aninda netlik | | Etkilesime Hazir Olma Suresi (TTI) | Referans deger | Yuzde 15-25 daha hizli | Zone baslatma sureci ortadan kalkar |

En belirgin iyilestirme, yogun asenkron aktivite iceren uygulamalarda gorulmektedir: HTTP polling, WebSocket baglantilari, zamanlayicilar ve karmasik olay isleyicileri. Bu islemlerin her biri daha once gereksiz change detection donguleri tetiklerken, zoneless mod bunlarin tamamnini ortadan kaldirmaktadir.

Gecis Surecinde Ayakta Kalan NgZone API'leri

Yaygin bir yanlis anlama: Zone.js'in kaldirilmasi tum NgZone referanslarinin da kaldirilmasi anlamina gelmektedir. Bu dogru degildir. NgZone.run() ve NgZone.runOutsideAngular() zoneless uygulamalarla uyumlu kalmaya devam eder ve paylasilan kutuphanelerde korunmalidir. Bu referanslarin kaldirilmasi, hala Zone.js kullanan ve bu kutuphaneleri tuketen uygulamalarda performans gerilemelerine neden olabilir.

Ancak uc NgZone observable'inin ortadan kaldirilmasi gerekmektedir:

• NgZone.onMicrotaskEmpty -- zoneless modda asla emit etmez
• NgZone.onUnstable -- zoneless modda asla emit etmez
• NgZone.onStable -- zoneless modda asla emit etmez

Bu observable'lara dayanan zamanlama bagimli mantik, @angular/core paketindeki afterNextRender() veya afterEveryRender() fonksiyonlari ile degistirilmelidir.

Angular 19 Deneysel API'den Angular 21 Varsayilana Gecis

Zoneless API'nin evrimi, net bir kararlilastirma yolu izlemektedir:

• Angular 18.1: provideExperimentalZonelessChangeDetection() deneysel olarak tanitildi
• Angular 19: Deneysel API rafine edildi, ekosistem genelinde daha kapsamli testler gerceklestirildi
• Angular 20: API provideZonelessChangeDetection() olarak yeniden adlandirildi ve kararli surume gecti
• Angular 20.2: API tamamen kararli hale geldi, davranissal degisiklik beklenmemektedir
• Angular 21: Zoneless, ng new ile olusturulan projelerde varsayilan oldu; ayrica bir provider cagrisi gerekmez

Angular 19 uzerinde calisan ekipler icin yukseltme yolu acik ve nettir: Angular 20'ye guncellenmeli, provideExperimentalZonelessChangeDetection ifadesi provideZonelessChangeDetection ile degistirilmeli ve zone.js polyfill'i kaldirilmalidir. Angular 19'un destek suresi 19 Mayis 2026'da sona erecektir; bu durum gecisi zamana karsi duyarli kilmaktadir.

Angular mulakat hazirliginda change detection konusu kritik bir oneme sahiptir. SharpSkill'deki Angular mulakat sorulari modulu, zoneless senaryolari da dahil olmak uzere change detection desenlerini derinlemesine kapsamaktadir. Daha genis bir perspektif icin en onemli 25 Angular mulakat sorusu rehberi incelenebilir. Angular Signals modulu ise zoneless'i mumkun kilan reaktivite modelini ayrintili olarak ele almaktadir.

Sonuc

• Zone.js'in kaldirilmasi, 33KB'lik bundle agirligini ortadan kaldirir ve 130'dan fazla tarayici API'sini yakalayan monkey-patching katmanini devre disi birakir
• Angular signal'leri, zoneless'i pratik kilan acik reaktivite modelini saglar ve durum degistiginde template'leri otomatik olarak bilgilendirir
• Gecis sureci, setTimeout/setInterval desenlerinin, reactive form'larin ve zamanlama bagimli mantigin signal tabanli veya markForCheck() yaklasimina donusturulmesini gerektirir
• SSR uygulamalarinin, Zone.js kararlilik tespitinin yerini almak uzere PendingTasks servisini benimsemesi zorunludur
• NgZone.run() ve NgZone.runOutsideAngular() geriye donuk uyumluluk icin paylasilan kutuphanelerde korunmalidir
• Angular 19'un deneysel API'si (provideExperimentalZonelessChangeDetection) dogrudan Angular 20'nin kararli provideZonelessChangeDetection() API'sine eslenemektedir; yukseltme bir yeniden adlandirma islemidir
• Ucuncu parti kutuphane uyumlulugu birincil risk faktorudur ve uretim ortamina dagitimdan once kapsamli test gerektirmektedir