# Angular Micro-frontends (Angular)

> Module federation, สถาปัตยกรรม micro-frontend, dependency ที่ใช้ร่วมกัน, กลยุทธ์การ deploy, รูปแบบการสื่อสาร

- 20 คำถามสัมภาษณ์
- Senior
- [คำถามสัมภาษณ์: Angular](https://sharpskill.dev/th/technologies/angular/interview-questions.md)

## 1. สถาปัตยกรรม micro-frontend ในบริบทของ Angular คืออะไร?

**คำตอบ**

สถาปัตยกรรม micro-frontend แบ่งแอปพลิเคชัน Angular แบบ monolithic ออกเป็นแอปพลิเคชันอิสระขนาดเล็กกว่า โดยแต่ละแอปพลิเคชันได้รับการพัฒนาและ deploy แยกกัน micro-frontend แต่ละตัวสามารถมี repository, pipeline CI/CD และทีมเฉพาะของตัวเอง Module Federation ของ Webpack 5 เป็นเทคโนโลยีที่แนะนำสำหรับการ implement สถาปัตยกรรมนี้ใน Angular โดยอนุญาตให้โหลดโค้ดแบบไดนามิกจากแอปพลิเคชันอื่นๆ ที่ runtime

## 2. บทบาทของ Module Federation ในสถาปัตยกรรม micro-frontend ของ Angular คืออะไร?

**คำตอบ**

Module Federation อนุญาตให้แชร์โค้ดระหว่างแอปพลิเคชัน Angular ที่ runtime โดยไม่ต้อง rebuild micro-frontend แต่ละตัวจะ expose module (remote) ที่สามารถถูกใช้งานโดยแอปพลิเคชันอื่น (host) ได้ ซึ่งช่วยหลีกเลี่ยงการซ้ำซ้อนของโค้ด ลดขนาด bundle และเปิดใช้งานการ deploy แบบอิสระ Module Federation จะจัดการการโหลดแบบ asynchronous, การ resolve dependency และการแชร์ library ทั่วไปเช่น Angular core โดยอัตโนมัติ

## 3. ความแตกต่างระหว่างแอปพลิเคชัน host และแอปพลิเคชัน remote ใน Module Federation คืออะไร?

**คำตอบ**

แอปพลิเคชัน host จะใช้งาน module ที่ถูก expose โดย remote โดยกำหนดค่า remote ใน webpack.config และโหลด module ของพวกเขาแบบไดนามิก แอปพลิเคชัน remote จะ expose module (component, service) เพื่อให้แอปพลิเคชันอื่นใช้งาน แอปพลิเคชันเดียวกันสามารถเป็นทั้ง host และ remote ได้ host ควบคุม shell ของแอปพลิเคชัน (header, navigation, layout) ขณะที่ remote จัดเตรียมฟีเจอร์ทางธุรกิจ

## มีอีก 17 คำถาม

- วิธีกำหนดค่า Module Federation ในโปรเจค Angular ด้วย @angular-architects/module-federation อย่างไร?
- ทำไมการกำหนดค่า shared scope ใน Module Federation จึงสำคัญ?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ Angular อื่นๆ

- [พื้นฐาน TypeScript](https://sharpskill.dev/th/technologies/angular/interview-questions/typescript-basics.md): 25 คำถาม, Junior
- [TypeScript ขั้นสูง](https://sharpskill.dev/th/technologies/angular/interview-questions/typescript-advanced.md): 20 คำถาม, Junior
- [พื้นฐาน Angular](https://sharpskill.dev/th/technologies/angular/interview-questions/angular-fundamentals.md): 20 คำถาม, Junior
- [คอมโพเนนต์และวงจรชีวิต](https://sharpskill.dev/th/technologies/angular/interview-questions/components-lifecycle.md): 20 คำถาม, Junior
- [Services & Dependency Injection](https://sharpskill.dev/th/technologies/angular/interview-questions/services-dependency-injection.md): 20 คำถาม, Junior
- [การจัดระเบียบโมดูล Angular](https://sharpskill.dev/th/technologies/angular/interview-questions/modules-organization.md): 22 คำถาม, Mid-Level
- [Angular CLI](https://sharpskill.dev/th/technologies/angular/interview-questions/angular-cli.md): 18 คำถาม, Junior
- [Directives และ Pipes](https://sharpskill.dev/th/technologies/angular/interview-questions/directives-pipes.md): 22 คำถาม, Mid-Level
- [Routing และการนำทาง](https://sharpskill.dev/th/technologies/angular/interview-questions/routing-navigation.md): 24 คำถาม, Mid-Level
- [Reactive Forms](https://sharpskill.dev/th/technologies/angular/interview-questions/forms-reactive.md): 26 คำถาม, Mid-Level
- [Template-driven Forms](https://sharpskill.dev/th/technologies/angular/interview-questions/forms-template-driven.md): 16 คำถาม, Mid-Level
- [พื้นฐาน RxJS](https://sharpskill.dev/th/technologies/angular/interview-questions/rxjs-fundamentals.md): 22 คำถาม, Mid-Level
- [Operator ของ RxJS](https://sharpskill.dev/th/technologies/angular/interview-questions/rxjs-operators.md): 24 คำถาม, Mid-Level
- [HttpClient และการเรียก API](https://sharpskill.dev/th/technologies/angular/interview-questions/http-client.md): 22 คำถาม, Mid-Level
- [การจัดการ state พื้นฐาน](https://sharpskill.dev/th/technologies/angular/interview-questions/state-management-basics.md): 20 คำถาม, Mid-Level
- [Change Detection](https://sharpskill.dev/th/technologies/angular/interview-questions/change-detection.md): 20 คำถาม, Mid-Level
- [Angular Signals](https://sharpskill.dev/th/technologies/angular/interview-questions/angular-signals.md): 20 คำถาม, Mid-Level
- [Standalone Components](https://sharpskill.dev/th/technologies/angular/interview-questions/standalone-components.md): 18 คำถาม, Mid-Level
- [การทำ Unit Testing ใน Angular](https://sharpskill.dev/th/technologies/angular/interview-questions/testing-unit.md): 22 คำถาม, Mid-Level
- [การทดสอบ End-to-End](https://sharpskill.dev/th/technologies/angular/interview-questions/testing-e2e.md): 18 คำถาม, Mid-Level
- [Build และการเพิ่มประสิทธิภาพ](https://sharpskill.dev/th/technologies/angular/interview-questions/build-optimization.md): 20 คำถาม, Mid-Level
- [พื้นฐาน NgRx](https://sharpskill.dev/th/technologies/angular/interview-questions/ngrx-fundamentals.md): 24 คำถาม, Senior
- [NgRx ขั้นสูง](https://sharpskill.dev/th/technologies/angular/interview-questions/ngrx-advanced.md): 24 คำถาม, Senior
- [สถาปัตยกรรม Angular](https://sharpskill.dev/th/technologies/angular/interview-questions/angular-architecture.md): 22 คำถาม, Senior
- [การปรับแต่งประสิทธิภาพ](https://sharpskill.dev/th/technologies/angular/interview-questions/performance-optimization.md): 22 คำถาม, Senior
- [ความปลอดภัยและแนวทางปฏิบัติที่ดี](https://sharpskill.dev/th/technologies/angular/interview-questions/security-best-practices.md): 20 คำถาม, Senior
- [รูปแบบ RxJS ขั้นสูง](https://sharpskill.dev/th/technologies/angular/interview-questions/advanced-rxjs-patterns.md): 22 คำถาม, Senior
- [Angular Universal และ SSR](https://sharpskill.dev/th/technologies/angular/interview-questions/angular-universal-ssr.md): 20 คำถาม, Senior

---

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