# Micro-frontend Angular (Angular)

> Module federation, kiến trúc micro-frontend, dependency dùng chung, chiến lược triển khai, mẫu giao tiếp

- 20 câu hỏi phỏng vấn
- Senior
- [Câu hỏi phỏng vấn: Angular](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van.md)

## 1. Kiến trúc micro-frontend trong bối cảnh Angular là gì?

**Câu trả lời**

Kiến trúc micro-frontend chia nhỏ một ứng dụng Angular monolithic thành các ứng dụng độc lập nhỏ hơn, mỗi ứng dụng được phát triển và triển khai riêng biệt. Mỗi micro-frontend có thể có repository, pipeline CI/CD và team riêng. Module Federation của Webpack 5 là công nghệ được khuyến nghị để triển khai kiến trúc này trong Angular, cho phép tải động code từ các ứng dụng khác tại runtime.

## 2. Vai trò của Module Federation trong kiến trúc micro-frontend Angular là gì?

**Câu trả lời**

Module Federation cho phép chia sẻ code giữa các ứng dụng Angular tại runtime mà không cần rebuild. Mỗi micro-frontend expose các module (remote) có thể được tiêu thụ bởi các ứng dụng khác (host). Điều này tránh trùng lặp code, giảm kích thước bundle và cho phép triển khai độc lập. Module Federation tự động xử lý loading bất đồng bộ, giải quyết dependency và chia sẻ thư viện chung như Angular core.

## 3. Sự khác biệt giữa ứng dụng host và ứng dụng remote trong Module Federation là gì?

**Câu trả lời**

Ứng dụng host tiêu thụ các module được expose bởi remote. Nó cấu hình các remote trong webpack.config và tải module của chúng một cách động. Một ứng dụng remote expose các module (component, service) để được tiêu thụ bởi các ứng dụng khác. Cùng một ứng dụng có thể vừa là host vừa là remote. Host kiểm soát shell của ứng dụng (header, navigation, layout) trong khi các remote cung cấp các tính năng nghiệp vụ.

## Còn 17 câu hỏi nữa

- Làm thế nào để cấu hình Module Federation trong dự án Angular với @angular-architects/module-federation?
- Tại sao việc cấu hình shared scope trong Module Federation lại quan trọng?

Đăng ký miễn phí: https://sharpskill.dev/vi/login

## Các chủ đề phỏng vấn Angular khác

- [Kiến thức cơ bản TypeScript](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/typescript-basics.md): 25 câu hỏi, Junior
- [TypeScript Nâng cao](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/typescript-advanced.md): 20 câu hỏi, Junior
- [Kiến thức cơ bản về Angular](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/angular-fundamentals.md): 20 câu hỏi, Junior
- [Components và vòng đời](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/components-lifecycle.md): 20 câu hỏi, Junior
- [Services & Dependency Injection](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/services-dependency-injection.md): 20 câu hỏi, Junior
- [Tổ chức Module Angular](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/modules-organization.md): 22 câu hỏi, Mid-Level
- [Angular CLI](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/angular-cli.md): 18 câu hỏi, Junior
- [Directives và Pipes](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/directives-pipes.md): 22 câu hỏi, Mid-Level
- [Routing và Điều hướng](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/routing-navigation.md): 24 câu hỏi, Mid-Level
- [Reactive Forms](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/forms-reactive.md): 26 câu hỏi, Mid-Level
- [Template-driven Forms](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/forms-template-driven.md): 16 câu hỏi, Mid-Level
- [Kiến Thức Cơ Bản RxJS](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/rxjs-fundamentals.md): 22 câu hỏi, Mid-Level
- [Operator RxJS](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/rxjs-operators.md): 24 câu hỏi, Mid-Level
- [HttpClient và lệnh gọi API](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/http-client.md): 22 câu hỏi, Mid-Level
- [Quản lý state cơ bản](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/state-management-basics.md): 20 câu hỏi, Mid-Level
- [Change Detection](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/change-detection.md): 20 câu hỏi, Mid-Level
- [Angular Signals](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/angular-signals.md): 20 câu hỏi, Mid-Level
- [Standalone Components](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/standalone-components.md): 18 câu hỏi, Mid-Level
- [Unit Testing trong Angular](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/testing-unit.md): 22 câu hỏi, Mid-Level
- [Kiểm thử End-to-End](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/testing-e2e.md): 18 câu hỏi, Mid-Level
- [Build và tối ưu hóa](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/build-optimization.md): 20 câu hỏi, Mid-Level
- [Nền tảng NgRx](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/ngrx-fundamentals.md): 24 câu hỏi, Senior
- [NgRx nâng cao](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/ngrx-advanced.md): 24 câu hỏi, Senior
- [Kiến trúc Angular](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/angular-architecture.md): 22 câu hỏi, Senior
- [Tối ưu hiệu năng](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/performance-optimization.md): 22 câu hỏi, Senior
- [Bảo mật và thực tiễn tốt nhất](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/security-best-practices.md): 20 câu hỏi, Senior
- [Các mẫu RxJS nâng cao](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/advanced-rxjs-patterns.md): 22 câu hỏi, Senior
- [Angular Universal và SSR](https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/angular-universal-ssr.md): 20 câu hỏi, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/vi/technologies/angular/cau-hoi-phong-van/micro-frontends-angular