คำถามสัมภาษณ์ Angular 19: Signals, SSR และแนวคิดสำคัญที่ต้องรู้

การสัมภาษณ์ Angular ในปี 2026 ก้าวข้ามแค่เรื่อง component และ service ไปไกลมาก Angular 19 ที่เปิดตัวในเดือนพฤศจิกายน 2024 ได้นำเสนอการเปลี่ยนแปลงทางสถาปัตยกรรมพื้นฐาน: Signals แบบเสถียร, SSR พร้อม incremental hydration และ zoneless change detection การเข้าใจแนวคิดเหล่านี้แยกผู้สมัครระดับกลางออกจากผู้สมัครระดับ senior

Angular 19 Signals: โมเดล reactive แบบใหม่

Signals คือการเปลี่ยนแปลงที่สำคัญที่สุดใน Angular นับตั้งแต่มีการเปิดตัว change detection Signal คือค่า reactive แบบ synchronous ที่จะแจ้งเตือน consumer โดยอัตโนมัติเมื่อค่ามีการเปลี่ยนแปลง

คำถามทั่วไป: "ความแตกต่างระหว่าง Signal กับ RxJS Observable คืออะไร?"

คำตอบที่คาดหวังจะแยกความแตกต่างของทั้งสองโมเดลอย่างชัดเจน:

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 ใช้กราฟ dependency แบบละเอียด ต่างจาก RxJS ที่จัดการ async workflow ที่ซับซ้อน (retry, debounce, merge) Signals ปรับ reactive แบบ synchronous ของ UI ให้เหมาะสม Angular 19 แนะนำให้ใช้ Signals สำหรับ state ของ component และ RxJS สำหรับ stream แบบ async (HTTP request, WebSocket)

Signal Inputs และ Queries: ย้ายจาก @Input()

Angular 19 ทำให้ API ที่ใช้ signal สำหรับ input, output และ query เสถียรขึ้น คำถามนี้ปรากฏอย่างต่อเนื่องในการสัมภาษณ์

คำถามทั่วไป: "จะย้าย @Input() แบบดั้งเดิมไปเป็น Signal Input อย่างไร?"

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()}`);
}

ข้อได้เปรียบหลัก: Signal Inputs ช่วยให้สร้างค่า computed() ได้โดยตรง โดยไม่ต้องใช้ lifecycle hook ไม่ต้องใช้ ngOnChanges เพื่อตอบสนองต่อการเปลี่ยนแปลงของ input อีกต่อไป Angular มี schematic signal-input-migration เพื่อทำให้การย้ายเป็นอัตโนมัติ

linkedSignal: การซิงค์ state ที่ขึ้นต่อกัน

linkedSignal คือ API เชิงทดลองของ Angular 19 ที่สร้าง signal แบบเขียนได้ที่เชื่อมโยงกับแหล่งที่มา แนวคิดนี้ปรากฏบ่อยในการสัมภาษณ์ระดับ senior

คำถามทั่วไป: "จะจัดการ state ที่ derived มาแบบ mutable ด้วย linkedSignal อย่างไร?"

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'

กรณีใช้งานจริง: dropdown filter ที่ค่าที่เลือกถูกรีเซ็ตเมื่อรายการต้นทางเปลี่ยน หากไม่มี linkedSignal รูปแบบนี้ต้องใช้ effect() พร้อม set() ซึ่งเป็น anti-pattern ที่สร้างวงจรการอัปเดต

Resource API: โหลดข้อมูล async ด้วย Signals

Angular 19 เปิดตัว API เชิงทดลอง resource สำหรับการโหลดข้อมูล async API นี้แทนที่รูปแบบดั้งเดิม service + subscribe ใน component

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

การแสดงความรู้เกี่ยวกับ resource เทียบกับ rxResource (เวอร์ชัน RxJS) ในการสัมภาษณ์พิสูจน์การติดตามเทคโนโลยีอย่างต่อเนื่อง rxResource ใช้ Observables เป็น loader ซึ่งมีประโยชน์สำหรับทีมที่มี codebase RxJS อยู่แล้ว

SSR และ incremental hydration ใน Angular 19

Angular 19 ยกระดับ SSR ไปอีกขั้นด้วย incremental hydration ในขั้น developer preview ฟีเจอร์นี้ทดสอบใน ระดับ Google Search เป็นหัวข้อสัมภาษณ์ที่พบบ่อยขึ้นเรื่อย ๆ

คำถามทั่วไป: "incremental hydration ของ Angular 19 ทำงานอย่างไร?"

Hydration แบบดั้งเดิมสร้าง component tree ทั้งหมดขึ้นใหม่ฝั่ง client หลังการ render บน server ส่วน incremental hydration จะ hydrate เฉพาะ component ที่จำเป็นในเวลาที่ component นั้นมองเห็นได้หรือมีการโต้ตอบ

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';
}

Directive @defer ควบคุมเวลาของ hydration ได้อย่างแม่นยำ trigger ที่ใช้ได้: on viewport (มองเห็น), on interaction (คลิก, focus), on idle (เบราว์เซอร์ว่าง), on timer(5s) (ดีเลย์) เนื้อหายังคงมองเห็นได้เป็น HTML แบบ static ก่อน hydration โดยไม่มีอาการกระพริบของเนื้อหา

Render mode ระดับ route: SSR แบบละเอียดต่อ route

Angular 19 เปิดตัว render mode ที่ระดับ route ทำให้ SSR, SSG และ CSR อยู่ร่วมกันในแอปพลิเคชันเดียวกันได้

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 },
];

ในการสัมภาษณ์ ความสามารถในการอธิบายเหตุผลของการเลือก render mode ในแต่ละ route แสดงถึงความเข้าใจในการชั่งน้ำหนักระหว่างประสิทธิภาพ, SEO และการโต้ตอบ หน้า static (landing, blog) ได้ประโยชน์จาก prerender หน้า dynamic ที่มีข้อมูลผู้ใช้ใช้ SSR แอปพลิเคชันที่โต้ตอบสูงยังคงอยู่ที่ CSR

Zoneless change detection: สถาปัตยกรรมที่ไม่มี Zone.js

Zoneless change detection คือวิวัฒนาการเชิงสถาปัตยกรรมที่สำคัญที่สุดใน Angular 19 คำถามนี้กลายเป็นข้อบังคับในการสัมภาษณ์ระดับ senior

คำถามทั่วไป: "change detection ทำงานอย่างไรเมื่อไม่มี Zone.js?"

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

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

หากไม่มี Zone.js Angular จะไม่ patch async API ของเบราว์เซอร์ (setTimeout, Promise, addEventListener) อีกต่อไป Change detection จะถูก trigger ผ่าน Signals เท่านั้น ประโยชน์ที่วัดได้:

• ลดขนาด bundle ลง 10-15 KB (zone.js ถูกลบออก)
• Stack trace สะอาด ไม่มี frame ของ Zone.js
• Change detection แบบเฉพาะเจาะจง: เฉพาะ component ที่ได้รับผลกระทบจาก Signal ที่ถูกแก้ไขเท่านั้นที่จะ render ใหม่

Standalone เป็นค่าเริ่มต้น: จุดสิ้นสุดของ NgModules

Angular 19 ทำให้ standalone component เป็นพฤติกรรมเริ่มต้น ไม่จำเป็นต้องใช้ flag standalone: true อีกต่อไป การตัดสินใจนี้ทำให้สถาปัตยกรรมง่ายขึ้นและลด boilerplate

คำถามทั่วไป: "standalone-by-default ส่งผลกระทบต่อสถาปัตยกรรมของแอปพลิเคชัน Angular อย่างไร?"

@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[]>([]);
}

แต่ละ component ประกาศ dependency ของตัวเองอย่างชัดเจนผ่าน imports NgModules ยังคงใช้ได้เพื่อความเข้ากันได้ย้อนหลัง แต่แอปพลิเคชัน Angular 19+ ใหม่ ๆ ไม่ต้องการอีกแล้ว ในการสัมภาษณ์ การอธิบายการย้ายแบบค่อยเป็นค่อยไป (component ต่อ component) แทนแนวทาง big bang เป็นที่ชื่นชม

กลยุทธ์การตอบสำหรับการสัมภาษณ์ Angular 19

ผู้สัมภาษณ์ทางเทคนิคประเมินสามมิติเกี่ยวกับ Angular 19:

• ความเข้าใจเชิงสถาปัตยกรรม: อธิบายว่าทำไม Signals จึงค่อย ๆ แทนที่ Zone.js ไม่ใช่แค่วิธีใช้
• การชั่งน้ำหนัก: รู้ว่าเมื่อใดควรใช้ computed() เทียบกับ linkedSignal เทียบกับ effect() และเมื่อใดควรเก็บ RxJS ไว้
• การย้าย: อธิบายกลยุทธ์การย้ายแบบค่อยเป็นค่อยไปจากแอปพลิเคชัน Angular แบบดั้งเดิมไปยัง Signals และโหมด zoneless

กุญแจสำคัญ: หลีกเลี่ยงการท่องจำ เอกสารทางการของ Angular แต่ละคำตอบควรประกอบด้วยกรณีใช้งานจริงจากโปรเจกต์จริง ฟอร์มที่ซับซ้อน หน้า e-commerce ที่มี SSR แดชบอร์ดแบบเรียลไทม์

สำหรับแนวคิดพื้นฐานของ Angular ก่อนการสัมภาษณ์ โปรดดู คู่มือฉบับสมบูรณ์เกี่ยวกับ 25 คำถามสัมภาษณ์ Angular

บทสรุป

• Signals ใน Angular 19 แทนที่รูปแบบ @Input() + ngOnChanges ด้วยโมเดล reactive แบบ synchronous ที่ละเอียด signal(), computed() และ input() ครอบคลุม 90% ของกรณีใช้งาน
• linkedSignal แก้ปัญหา state ที่ derived แบบ mutable โดยไม่ต้องใช้ anti-pattern effect() + set()
• Incremental hydration ผ่าน @defer ลด Time to Interactive โดยไม่กระทบ SEO แต่ละ component จะ hydrate ตาม trigger ของตน
• โหมด zoneless ลบ Zone.js ออกจาก bundle และพุ่งเป้า change detection ไปที่ component ที่ได้รับผลกระทบจาก Signal เท่านั้น
• Render mode ระดับ route ช่วยให้ผสม SSG, SSR และ CSR ในแอปพลิเคชันเดียวกันได้ตามความต้องการของแต่ละหน้า
• Component standalone-by-default ขจัดความจำเป็นในการใช้ NgModules ในแอปพลิเคชันใหม่
• ในการสัมภาษณ์ การแสดงการชั่งน้ำหนัก (Signals กับ RxJS, SSR กับ CSR, zoneless กับ Zone.js) สำคัญกว่า syntax