# Angular 19 mülakat soruları: Signals, SSR ve bilinmesi gereken kavramlar > En sık karşılaşılan Angular 19 mülakat soruları: Signals, artımlı hydration, zoneless change detection ve yeni reaktif API'ler. Kod örnekleri ve beklenen cevaplarla birlikte. - Published: 2026-03-28 - Updated: 2026-05-04 - Author: Anthony Fillion-Maillet - Tags: angular, interview, signals, ssr, angular-19 - Reading time: 9 min --- 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. > **2026'da mülakatçıların değerlendirdikleri** > > Angular 19 soruları üç alanı hedefliyor: Signals ile ince taneli reaktivite, artımlı hydration aracılığıyla SSR performansı ve Zone.js olmadan uygulama tasarlama becerisi. Beklenen cevaplar yalnızca sözdizimi bilgisini değil mimari kavrayışı gösteriyor. ## 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: ```typescript // signals-vs-observables.ts 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?"** ```typescript // user-card.component.ts import { Component, input, computed } from '@angular/core'; @Component({ selector: 'app-user-card', template: `

{{ fullName() }}

{{ role() }}
` }) export class UserCardComponent { // Signal inputs: strict typing, optional default value firstName = input.required(); lastName = input.required(); role = input('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?"** ```typescript // product-filter.component.ts 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. > **Mülakat tuzağı: effect() içinde set()** > > Bir `effect()` içinde `signal.set()` çağırmak Angular tarafından tespit edilen bir anti-pattern'dir. Framework, geliştirme modunda bir uyarı yayar. Doğru çözüm: türetilmiş değerin yazılabilir olması gerekip gerekmediğine göre `linkedSignal` veya `computed()` kullanmaktır. ## 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. ```typescript // user-profile.component.ts 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](https://blog.angular.dev/meet-angular-v19-7b29dfd05b84) 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. ```typescript // product-page.component.ts import { Component } from '@angular/core'; @Component({ template: ` @defer (on viewport) { } @defer (on interaction) { } ` }) 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. ```typescript // app.routes.server.ts 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?"** ```typescript // main.ts 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 > **Angular 20.2: zoneless kararlı hale geliyor** > > Angular 20.2'den itibaren zoneless modu, `provideZonelessChangeDetection()` (Experimental ön eki olmadan) ile kararlıdır. Mülakatta bu gelişimden bahsetmek ekosistemi aktif takip ettiğini gösterir. ## 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?"** ```typescript // dashboard.component.ts @Component({ selector: 'app-dashboard', imports: [CommonModule, RouterModule, UserCardComponent], template: ` @for (user of users(); track user.id) { } ` }) export class DashboardComponent { users = signal([]); } ``` 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](https://angular.dev) 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](/blog/angular/top-25-angular-interview-questions) 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 --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/tr/blog/angular/angular-19-interview-questions-signals-ssr-must-know