Angular 19 mülakat soruları: Signals, SSR ve bilinmesi gereken kavramlar

2026'da Angular mülakatları artık bileşenler ve servislerin çok ötesine geçiyor. Kasım 2024'te yayınlanan Angular 19, temel mimari değişiklikler getirdi: kararlı Signals, artımlı hydration ile SSR ve zoneless change detection. Bu kavramlara hâkim olmak orta seviye adayları senior adaylardan ayırıyor.

Angular 19 Signals: yeni reaktivite modeli

Signals, Angular'ın change detection'ı tanıttığı günden bu yana yaşadığı en köklü değişikliği temsil ediyor. Bir Signal, değiştiğinde tüketicilerine otomatik olarak haber veren senkron reaktif bir değerdir.

Tipik soru: "Bir Signal ile RxJS Observable arasındaki fark nedir?"

Beklenen cevap iki modeli net biçimde ayırır:

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

// Signal: synchronous, value always available
const count = signal(0);
const doubled = computed(() => count() * 2); // Recomputed only when count changes

// Effect: reacts to signal changes
effect(() => {
  console.log(`Count: ${count()}, Doubled: ${doubled()}`);
});

count.set(5); // Immediate, synchronous notification

Signals, ince taneli bir bağımlılık grafiği kullanır. Karmaşık asenkron iş akışlarını (retry, debounce, merge) ele alan RxJS'in aksine, Signals senkron UI reaktivitesini optimize eder. Angular 19, bileşen durumu için Signals'ı, asenkron akışlar (HTTP istekleri, WebSocket'ler) için RxJS'i önerir.

Signal Inputs ve Queries: @Input()'tan geçiş

Angular 19, input, output ve query için signal tabanlı API'leri kararlı hale getirir. Bu soru mülakatlarda sürekli karşımıza çıkar.

Tipik soru: "Klasik bir @Input() Signal Input'a nasıl taşınır?"

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

@Component({
  selector: 'app-user-card',
  template: `
    <div class="card">
      <h3>{{ fullName() }}</h3>
      <span>{{ role() }}</span>
    </div>
  `
})
export class UserCardComponent {
  // Signal inputs: strict typing, optional default value
  firstName = input.required<string>();
  lastName = input.required<string>();
  role = input<string>('developer'); // Default value

  // Computed derived from inputs: automatically recomputed
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
}

Temel avantaj: Signal Inputs, lifecycle hook'larına gerek kalmadan doğrudan computed() değerleri oluşturmaya imkân verir. Input değişikliklerine tepki vermek için artık ngOnChanges gerekmez. Angular, geçişi otomatikleştirmek için signal-input-migration schematic'ini sunar.

linkedSignal: bağımlı durumun senkronizasyonu

linkedSignal, bir kaynağa bağlı yazılabilir bir signal oluşturan deneysel bir Angular 19 API'sidir. Bu kavram senior düzeyindeki mülakatlarda sıkça karşımıza çıkar.

Tipik soru: "Değiştirilebilir türetilmiş durum linkedSignal ile nasıl yönetilir?"

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

// Category list that can change
const categories = signal(['frontend', 'backend', 'devops']);

// Linked selection: resets when categories change
const selectedCategory = linkedSignal({
  source: categories,
  computation: (cats) => cats[0] // Reset to first element
});

// Manual modification still possible
selectedCategory.set('backend');

// When categories changes, selectedCategory resets automatically
categories.set(['mobile', 'data', 'cloud']);
// selectedCategory() === 'mobile'

Somut kullanım senaryosu: kaynak liste değiştiğinde seçimi sıfırlanan bir filtre dropdown'u. linkedSignal olmadan bu kalıp effect() içinde set() çağrısı gerektiriyordu, bu da güncelleme döngüleri oluşturan bir anti-pattern'dir.

Resource API: Signals ile asenkron veri yükleme

Angular 19, asenkron veri yüklemek için deneysel resource API'sini sunar. Bu API, bileşenlerdeki klasik servis + subscribe kalıbının yerini alır.

import { resource, signal } from '@angular/core';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const userId = signal(42);
const http = inject(HttpClient);

// Resource: links a source signal to an async loader
const userResource = resource({
  request: () => ({ id: userId() }),  // Recomputed when userId changes
  loader: async ({ request }) => {
    const response = await fetch(`/api/users/${request.id}`);
    return response.json();
  }
});

// Access in template
// userResource.value()   -> data (or undefined)
// userResource.isLoading() -> boolean
// userResource.error()    -> error if any

Mülakatta resource ile rxResource (RxJS sürümü) arasındaki bilgiyi göstermek aktif teknoloji takibinin işaretidir. rxResource, Observable'ları loader olarak kullanır ve mevcut bir RxJS kod tabanı olan ekipler için faydalıdır.

Angular 19'da SSR ve artımlı hydration

Angular 19, developer preview aşamasındaki artımlı hydration ile SSR'ı bir üst seviyeye taşır. Google Search ölçeğinde test edilen bu özellik, mülakatlarda giderek daha sık konuşulan bir konudur.

Tipik soru: "Angular 19'un artımlı hydration'ı nasıl çalışır?"

Klasik hydration, sunucu render'ı sonrasında tüm bileşen ağacını istemci tarafında yeniden oluşturur. Artımlı hydration ise yalnızca gerekli bileşenleri, görünür veya etkileşimli hale geldikleri anda hidre eder.

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

@Component({
  template: `
    <app-header />
    <app-product-details [id]="productId" />

    <!-- Hydrated only when visible in viewport -->
    @defer (on viewport) {
      <app-reviews [productId]="productId" />
    }

    <!-- Hydrated only on user interaction -->
    @defer (on interaction) {
      <app-comment-form />
    }
  `
})
export class ProductPageComponent {
  productId = 'angular-19-guide';
}

@defer direktifi hydration'ın ne zaman gerçekleşeceğini hassas biçimde kontrol eder. Mevcut tetikleyiciler: on viewport (görünür), on interaction (tıklama, focus), on idle (tarayıcı boşta), on timer(5s) (gecikme). İçerik, hydration öncesinde statik HTML olarak görünür kalır ve içerik atlaması yaşanmaz.

Route düzeyinde render mode: rota başına granüler SSR

Angular 19, rota düzeyinde render mode'u tanıtarak aynı uygulama içinde SSR, SSG ve CSR'in birlikte var olmasına imkân verir.

import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  // Marketing pages: pre-rendered at build time (SSG)
  { path: '', renderMode: RenderMode.Prerender },
  { path: 'pricing', renderMode: RenderMode.Prerender },

  // Dashboard: server-rendered on each request (SSR)
  { path: 'dashboard/**', renderMode: RenderMode.Server },

  // Interactive editor: client-side only (CSR)
  { path: 'editor/**', renderMode: RenderMode.Client },
];

Mülakatlarda her rota için render mode seçimini gerekçelendirebilmek, performans, SEO ve etkileşim arasındaki ödünleşimleri kavradığını gösterir. Statik sayfalar (landing, blog) prerender'dan yararlanır. Kullanıcı verisi içeren dinamik sayfalar SSR kullanır. Yüksek etkileşimli uygulamalar CSR'da kalır.

Zoneless change detection: Zone.js olmadan mimari

Zoneless change detection, Angular 19'un en önemli mimari evrimidir. Bu soru senior mülakatlarında zorunlu hale gelmiştir.

Tipik soru: "Zone.js olmadan change detection nasıl çalışır?"

import { bootstrapApplication } from '@angular/platform-browser';
import {
  provideExperimentalZonelessChangeDetection
} from '@angular/core';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Zone.js olmadan Angular, tarayıcının asenkron API'lerini (setTimeout, Promise, addEventListener) artık patch'lemez. Change detection yalnızca Signals üzerinden tetiklenir. Ölçülebilir avantajlar:

• Bundle boyutunda 10-15 KB azalma (zone.js kaldırıldı)
• Zone.js çerçeveleri olmadan temiz stack trace'ler
• Hedefli change detection: yalnızca değiştirilmiş bir Signal'den etkilenen bileşenler yeniden render edilir

Varsayılan olarak standalone: NgModules'ün sonu

Angular 19, standalone bileşenleri varsayılan davranış haline getirir. standalone: true flag'ine artık ihtiyaç yoktur. Bu karar mimariyi sadeleştirir ve boilerplate'i azaltır.

Tipik soru: "standalone-by-default'un Angular uygulama mimarisi üzerindeki etkisi nedir?"

@Component({
  selector: 'app-dashboard',
  imports: [CommonModule, RouterModule, UserCardComponent],
  template: `
    <nav>
      <a routerLink="/home">Home</a>
    </nav>
    @for (user of users(); track user.id) {
      <app-user-card [firstName]="user.firstName" [lastName]="user.lastName" />
    }
  `
})
export class DashboardComponent {
  users = signal<User[]>([]);
}

Her bileşen bağımlılıklarını imports aracılığıyla açıkça bildirir. NgModules geriye dönük uyumluluk için kullanılabilir kalır, ancak yeni Angular 19+ uygulamalarının artık ihtiyacı yoktur. Mülakatlarda big bang yaklaşımı yerine artımlı bir geçiş (bileşen bileşen) anlatabilmek değerlidir.

Angular 19 mülakatları için cevap stratejileri

Teknik mülakatçılar Angular 19 üzerinde üç boyutu değerlendirir:

• Mimari kavrayış: Signals'ın Zone.js'in yerini neden kademeli olarak aldığını açıklamak, sadece nasıl kullanıldığını değil
• Ödünleşimler: computed(), linkedSignal ve effect() arasındaki seçimi ve RxJS'i ne zaman koruyacağını bilmek
• Geçiş: klasik bir Angular uygulamasından Signals ve zoneless moda artımlı geçiş stratejisi tarif etmek

Anahtar nokta: resmi Angular dokümantasyonunu ezberden okumaktan kaçınmak. Her cevap gerçek bir projeden somut bir kullanım senaryosuyla, karmaşık bir form, SSR'lı bir e-ticaret sayfası, gerçek zamanlı bir dashboard ile örneklendirilmelidir.

Mülakat öncesi temel Angular kavramları için 25 Angular mülakat sorusunun tam rehberine bakabilirsiniz.

Sonuç

• Angular 19 Signals, @Input() + ngOnChanges kalıplarının yerini ince taneli senkron reaktif bir modelle alır. signal(), computed() ve input() kullanım senaryolarının %90'ını kapsar
• linkedSignal, effect() + set() anti-pattern'ine başvurmadan değiştirilebilir türetilmiş durumu çözer
• @defer aracılığıyla artımlı hydration, SEO'dan ödün vermeden Time to Interactive'i azaltır. Her bileşen kendi tetikleyicisine göre hidre edilir
• Zoneless modu Zone.js'i bundle'dan çıkarır ve change detection'ı yalnızca Signal'den etkilenen bileşenlere yönlendirir
• Rota düzeyinde render mode, her sayfanın ihtiyaçlarına göre aynı uygulamada SSG, SSR ve CSR'i karıştırmaya imkân verir
• Standalone-by-default bileşenleri yeni uygulamalarda NgModules ihtiyacını ortadan kaldırır
• Mülakatlarda ödünleşimleri (Signals vs RxJS, SSR vs CSR, zoneless vs Zone.js) göstermek sözdiziminden daha önemlidir