Question 1

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

Accepted Answer

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

Question 2

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

Accepted Answer

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

Question 3

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

Accepted Answer

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

Angular Micro-frontends

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

คำตอบ

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

คำตอบ

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

คำตอบ

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

ทำไมการกำหนดค่า shared scope ใน Module Federation จึงสำคัญ?

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

พื้นฐาน TypeScript

TypeScript ขั้นสูง

พื้นฐาน Angular

คอมโพเนนต์และวงจรชีวิต

Services & Dependency Injection

การจัดระเบียบโมดูล Angular

Angular CLI

Directives และ Pipes

Routing และการนำทาง

Reactive Forms

Template-driven Forms

พื้นฐาน RxJS

Operator ของ RxJS

HttpClient และการเรียก API

การจัดการ state พื้นฐาน

Change Detection

Angular Signals

Standalone Components

การทำ Unit Testing ใน Angular

การทดสอบ End-to-End

Build และการเพิ่มประสิทธิภาพ

พื้นฐาน NgRx

NgRx ขั้นสูง

สถาปัตยกรรม Angular

การปรับแต่งประสิทธิภาพ

ความปลอดภัยและแนวทางปฏิบัติที่ดี

รูปแบบ RxJS ขั้นสูง

Angular Universal และ SSR

เชี่ยวชาญ Angular สำหรับการสัมภาษณ์ครั้งถัดไป