Câu Hỏi Phỏng Vấn Angular 20 và Giải Đáp (Phần 4)

Trong Phần 3, chúng ta đã khám phá về Forms, Validation, và Routing (Q101–Q150).
Bây giờ, trong Phần 4 của Câu Hỏi và Giải Đáp Phỏng Vấn Angular 20 (Phiên bản 2025), chúng ta sẽ đề cập đến:

• Thành Phần Độc Lập (Q151–Q158)
• Angular Elements (Q159–Q163)
• Micro Frontends (MFE) với Module Federation (Q164–Q170)

Thành Phần Độc Lập (Q151–Q158)

Q151. Thành phần độc lập trong Angular là gì?

• Được giới thiệu trong Angular 14.
• Cho phép các thành phần tồn tại mà không cần NgModules.
• Đơn giản hóa cấu trúc và khởi động ứng dụng.

Q152. Làm thế nào để tạo một thành phần độc lập trong Angular 20?

ng g component home --standalone

Lệnh này sẽ tạo ra một thành phần với thuộc tính standalone: true.

Q153. Làm thế nào để khai báo một thành phần độc lập?

@Component({
  selector: 'app-home',
  standalone: true,
  templateUrl: './home.component.html',
  imports: [CommonModule]
})
export class HomeComponent {}

Q154. Làm thế nào để khởi động một ứng dụng Angular với các thành phần độc lập?

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

Q155. Lợi ích của các thành phần độc lập là gì?

• Không cần mã khởi tạo NgModule.
• Khởi động nhanh hơn.
• Tính mô-đun cao hơn, dễ dàng di chuyển.
• Hoạt động tốt với micro frontends.

Q156. Các thành phần độc lập có thể sử dụng các thành phần hoặc chỉ thị khác không?

• Có, bằng cách nhập chúng vào mảng imports.

Q157. Làm thế nào để sử dụng Dependency Injection với các thành phần độc lập?

• Hoạt động giống như các thành phần truyền thống sử dụng providers.

Q158. Các thành phần độc lập cải thiện tree-shaking như thế nào?

• Vì chúng khai báo các imports của riêng mình, mã không sử dụng có thể dễ dàng được loại bỏ bởi bundler.

Angular Elements (Q159–Q163)

Q159. Angular Elements là gì?

• Các thành phần Angular được đóng gói dưới dạng elements tùy chỉnh (Web Components).
• Có thể được sử dụng trong bất kỳ framework nào (React, Vue, JS thuần).

Q160. Làm thế nào để tạo một Angular Element?

• Sử dụng createCustomElement() từ @angular/elements.
• Đăng ký với customElements.define().

Q161. Ví dụ về việc chuyển đổi một thành phần thành Angular Element?

import { createCustomElement } from '@angular/elements';
import { Injector } from '@angular/core';

constructor(private injector: Injector) {
  const el = createCustomElement(HelloComponent, { injector });
  customElements.define('hello-element', el);
}

Q162. Các trường hợp sử dụng Angular Elements là gì?

• Nhúng các widget Angular vào ứng dụng không phải Angular.
• Di chuyển dần từ các ứng dụng cũ.
• Các thành phần UI có thể tái sử dụng giữa các dự án.

Q163. Những hạn chế của Angular Elements là gì?

• Kích thước gói lớn hơn so với web components gốc.
• Chi phí hiệu suất do Angular runtime.

Micro Frontends (Q164–Q170)

Q164. Micro Frontends (MFE) trong Angular là gì?

• Kiến trúc mà ứng dụng frontend được chia thành các mô-đun có thể triển khai độc lập.
• Mỗi mô-đun có thể được xây dựng bằng Angular hoặc các framework khác.

Q165. Làm thế nào để thực hiện Micro Frontends trong Angular 20?

• Sử dụng Webpack Module Federation với Angular CLI hoặc Nx.
• Định nghĩa một ứng dụng là host và các ứng dụng khác là remotes.

Q166. Ví dụ về cấu hình Module Federation trong Angular?

webpack.config.js:

plugins: [
  new ModuleFederationPlugin({
    name: 'remoteApp',
    filename: 'remoteEntry.js',
    exposes: { './Module': './src/app/remote/remote.module.ts' }
  })
]

Q167. Lợi ích của Micro Frontends trong Angular là gì?

• Triển khai độc lập.
• Công nghệ không phụ thuộc.
• Mở rộng tốt cho các nhóm lớn.
• Dễ dàng nâng cấp các mô-đun riêng lẻ.

Q168. Những thách thức của Micro Frontends là gì?

• Tăng độ phức tạp trong routing và giao tiếp.
• Vấn đề quản lý trạng thái chia sẻ.
• Độ phức tạp trong thiết lập ban đầu cao hơn.

Q169. Các thành phần độc lập của Angular giúp gì trong kiến trúc MFE?

• Loại bỏ sự phụ thuộc vào module → các đơn vị nhẹ hơn, tự chứa.
• Làm cho các ứng dụng từ xa nhẹ hơn và dễ tích hợp hơn.

Q170. Làm thế nào để chia sẻ thư viện giữa các MFEs trong Angular?

• Sử dụng cấu hình chia sẻ của Module Federation.
• Ví dụ: chia sẻ @angular/core, rxjs để tránh trùng lặp.

Kết Luận

Đây là Phần 4 của Câu Hỏi và Giải Đáp Phỏng Vấn Angular 20 (Phiên bản 2025).
Chúng ta đã đề cập đến:
Thành Phần Độc Lập (Q151–Q158)
Angular Elements (Q159–Q163)
Micro Frontends (Q164–Q170)

Hy vọng rằng những thông tin này sẽ hữu ích cho bạn trong việc chuẩn bị cho phỏng vấn và phát triển ứng dụng Angular hiệu quả hơn. Hãy theo dõi các phần tiếp theo để có thêm nhiều kiến thức bổ ích!