Câu hỏi phỏng vấn Angular 19: Signals, SSR và những khái niệm bắt buộc phải biết

Phỏng vấn Angular vào năm 2026 vượt xa khái niệm component và service. Angular 19 ra mắt vào tháng 11 năm 2024 đã giới thiệu những thay đổi kiến trúc cốt lõi: Signals ổn định, SSR với hydration tăng dần và zoneless change detection. Việc làm chủ các khái niệm này phân biệt ứng viên trung cấp với ứng viên senior.

Angular 19 Signals: mô hình reactive mới

Signals đại diện cho thay đổi cơ bản nhất trong Angular kể từ khi giới thiệu change detection. Một Signal là một giá trị reactive đồng bộ, tự động thông báo cho các consumer khi nó thay đổi.

Câu hỏi điển hình: "Sự khác biệt giữa Signal và RxJS Observable là gì?"

Câu trả lời mong đợi phân biệt rõ ràng hai mô hình:

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 sử dụng đồ thị phụ thuộc chi tiết. Khác với RxJS xử lý các luồng bất đồng bộ phức tạp (retry, debounce, merge), Signals tối ưu hóa khả năng reactive đồng bộ của UI. Angular 19 khuyến nghị Signals cho state của component và RxJS cho các luồng bất đồng bộ (yêu cầu HTTP, WebSockets).

Signal Inputs và Queries: di chuyển từ @Input()

Angular 19 ổn định các API dựa trên signal cho input, output và query. Câu hỏi này xuất hiện liên tục trong các buổi phỏng vấn.

Câu hỏi điển hình: "Làm thế nào để di chuyển một @Input() cổ điển sang 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()}`);
}

Lợi ích chính: Signal Inputs cho phép tạo các giá trị computed() trực tiếp, không cần lifecycle hook. Không cần ngOnChanges để phản ứng với thay đổi input. Angular cung cấp schematic signal-input-migration để tự động hóa việc di chuyển.

linkedSignal: đồng bộ state phụ thuộc

linkedSignal là API thử nghiệm của Angular 19, tạo ra một signal có thể ghi và liên kết với một nguồn. Khái niệm này thường xuất hiện trong các buổi phỏng vấn cấp senior.

Câu hỏi điển hình: "Làm thế nào để xử lý state suy diễn có thể thay đổi với 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'

Trường hợp sử dụng cụ thể: một dropdown lọc có lựa chọn được đặt lại khi danh sách nguồn thay đổi. Không có linkedSignal, mẫu này yêu cầu effect() với set(), một anti-pattern tạo ra vòng lặp cập nhật.

Resource API: tải dữ liệu bất đồng bộ với Signals

Angular 19 giới thiệu API thử nghiệm resource để tải dữ liệu bất đồng bộ. API này thay thế mẫu cổ điển service + subscribe trong các 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

Việc thể hiện kiến thức về resource so với rxResource (phiên bản RxJS) trong phỏng vấn chứng tỏ sự cập nhật công nghệ tích cực. rxResource sử dụng Observable làm loader, hữu ích cho các nhóm có codebase RxJS hiện có.

SSR và hydration tăng dần trong Angular 19

Angular 19 đưa SSR lên một tầm cao mới với hydration tăng dần ở giai đoạn developer preview. Tính năng này, được kiểm thử ở quy mô Google Search, là một chủ đề phỏng vấn ngày càng phổ biến.

Câu hỏi điển hình: "Hydration tăng dần của Angular 19 hoạt động như thế nào?"

Hydration cổ điển tái tạo toàn bộ cây component ở phía client sau khi render trên server. Hydration tăng dần chỉ hydrate các component cần thiết, vào thời điểm chúng trở nên hiển thị hoặc tương tác.

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 kiểm soát chính xác thời điểm hydration xảy ra. Các trigger có sẵn: on viewport (hiển thị), on interaction (click, focus), on idle (trình duyệt rảnh), on timer(5s) (trễ). Nội dung vẫn hiển thị dưới dạng HTML tĩnh trước khi hydration, không có hiện tượng nhấp nháy.

Render mode cấp route: SSR chi tiết theo route

Angular 19 giới thiệu render mode ở cấp route, cho phép SSR, SSG và CSR cùng tồn tại trong cùng một ứng dụng.

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

Trong phỏng vấn, khả năng biện minh cho lựa chọn render mode theo từng route thể hiện sự hiểu biết về các đánh đổi giữa hiệu năng, SEO và tính tương tác. Các trang tĩnh (landing, blog) hưởng lợi từ prerender. Các trang động với dữ liệu người dùng sử dụng SSR. Các ứng dụng có tính tương tác cao vẫn ở CSR.

Zoneless change detection: kiến trúc không có Zone.js

Zoneless change detection là sự tiến hóa kiến trúc quan trọng nhất trong Angular 19. Câu hỏi này đã trở thành bắt buộc trong các buổi phỏng vấn senior.

Câu hỏi điển hình: "Change detection hoạt động như thế nào khi không có Zone.js?"

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

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

Không có Zone.js, Angular không còn patch các API bất đồng bộ của trình duyệt (setTimeout, Promise, addEventListener). Change detection chỉ được kích hoạt thông qua Signals. Lợi ích đo lường được:

• Giảm kích thước bundle 10-15 KB (zone.js bị loại bỏ)
• Stack trace sạch không có frame của Zone.js
• Change detection có mục tiêu: chỉ các component bị ảnh hưởng bởi Signal được sửa đổi mới render lại

Standalone mặc định: kết thúc thời đại NgModules

Angular 19 biến component standalone thành hành vi mặc định. Cờ standalone: true không còn cần thiết. Quyết định này đơn giản hóa kiến trúc và giảm boilerplate.

Câu hỏi điển hình: "Tác động của standalone-by-default đến kiến trúc ứng dụng Angular là gì?"

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

Mỗi component khai báo rõ ràng các phụ thuộc của mình thông qua imports. NgModules vẫn có sẵn để tương thích ngược, nhưng các ứng dụng Angular 19+ mới không còn cần đến chúng. Trong phỏng vấn, việc giải thích chiến lược di chuyển tăng dần (component theo component) thay vì cách tiếp cận big bang được đánh giá cao.

Chiến lược trả lời cho phỏng vấn Angular 19

Người phỏng vấn kỹ thuật đánh giá ba khía cạnh về Angular 19:

• Hiểu biết kiến trúc: giải thích lý do Signals dần thay thế Zone.js, không chỉ cách sử dụng chúng
• Đánh đổi: biết khi nào dùng computed() so với linkedSignal so với effect(), và khi nào giữ RxJS
• Di chuyển: mô tả chiến lược di chuyển tăng dần từ ứng dụng Angular cổ điển sang Signals và chế độ zoneless

Điểm mấu chốt: tránh đọc thuộc lòng tài liệu chính thức của Angular. Mỗi câu trả lời cần được minh họa bằng một trường hợp sử dụng cụ thể từ một dự án thực tế, một biểu mẫu phức tạp, một trang thương mại điện tử với SSR, một dashboard thời gian thực.

Đối với các khái niệm cơ bản về Angular trước phỏng vấn, hãy xem hướng dẫn đầy đủ về 25 câu hỏi phỏng vấn Angular.

Kết luận

• Signals của Angular 19 thay thế các mẫu @Input() + ngOnChanges bằng mô hình reactive đồng bộ chi tiết. signal(), computed() và input() bao phủ 90% các trường hợp sử dụng
• linkedSignal giải quyết state suy diễn có thể thay đổi mà không phải dùng đến anti-pattern effect() + set()
• Hydration tăng dần qua @defer giảm Time to Interactive mà không hy sinh SEO. Mỗi component được hydrate theo trigger của nó
• Chế độ zoneless loại bỏ Zone.js khỏi bundle và nhắm change detection chỉ vào các component bị ảnh hưởng bởi Signal
• Render mode cấp route cho phép kết hợp SSG, SSR và CSR trong cùng một ứng dụng theo nhu cầu của từng trang
• Component standalone-by-default loại bỏ nhu cầu sử dụng NgModules trong các ứng dụng mới
• Trong phỏng vấn, việc thể hiện các đánh đổi (Signals vs RxJS, SSR vs CSR, zoneless vs Zone.js) quan trọng hơn cú pháp