MicroFrontends คืออะไร?

MicroFrontends เป็นรูปแบบสถาปัตยกรรมสำหรับสร้างเว็บแอปพลิเคชันโดยแบ่งย่อยออกเป็นโมดูลที่เล็กลง เป็นอิสระจากกัน และเชื่อมต่อกันอย่างหลวมๆ แต่ละโมดูลหรือ MicroFrontend ได้รับการพัฒนาและปรับใช้โดยอิสระ โดยมีชุดการพึ่งพา เทคโนโลยี และทีมของตนเอง

การนำ MicroFrontend ไปใช้ใน Angular 15 เกี่ยวข้องกับการแบ่งแอปพลิเคชันออกเป็นส่วนย่อยๆ ที่สามารถพัฒนาและปรับใช้ได้อย่างอิสระ MicroFrontend แต่ละรายการควรมีแอปพลิเคชันเชิงมุมของตนเอง โดยมีชุดส่วนประกอบ บริการ และโมดูลของตนเอง

ขั้นตอนสำคัญในการปรับใช้ MicroFrontend ใน Angular 15:

1. แบ่งแอปพลิเคชันออกเป็นส่วนย่อยๆ อิสระตามโดเมนธุรกิจหรือฟังก์ชันการทำงาน
2. สร้างแอปพลิเคชันเชิงมุมสำหรับแต่ละ MicroFrontend ด้วยชุดส่วนประกอบ บริการ และโมดูลของตนเอง
3. กำหนดสัญญา API สำหรับการสื่อสารระหว่าง MicroFrontends นี่อาจเป็น RESTful API, WebSockets หรือเหตุการณ์ที่กำหนดเอง
4. ใช้ปลั๊กอินรวมโมดูลเพื่อโหลด MicroFrontends แบบไดนามิกลงในแอปพลิเคชันหลักขณะรันไทม์ การรวมโมดูลเป็นคุณสมบัติใน Webpack ที่อนุญาตให้หลายแอปพลิเคชันแบ่งปันรหัสในขณะรันไทม์
5. ใช้โมดูลที่ใช้ร่วมกันที่มีรหัสทั่วไปและส่วนประกอบที่สามารถใช้โดย MicroFrontends หลายตัว
6. ใช้ระบบการจัดการสถานะแบบรวมศูนย์ เช่น Redux หรือ NgRx เพื่อจัดการสถานะของแอปพลิเคชันทั่วทั้ง MicroFrontends
7. ใช้ระบบการออกแบบ UI ที่สอดคล้องกันทั่วทั้ง MicroFrontends เพื่อให้แน่ใจว่าผู้ใช้จะได้รับประสบการณ์ที่สอดคล้องกัน

MicroFrontends ในเชิงมุมโดยใช้การรวมโมดูล

การกำหนดค่าแอปพลิเคชันโฮสต์

1. การสร้างโฮสต์แอปพลิเคชัน

ng new angular-mfe-example --create-application="false"

2. สร้างแอปโฮสต์ (แอปพลิเคชันหลัก)

เป็นแอปพลิเคชันหลักที่เราได้รับแอปพลิเคชันระยะไกลทั้งหมดและกำหนดค่าการกำหนดเส้นทางสำหรับแอปพลิเคชันเหล่านั้น

ng g application host

4. อัปเดตเส้นทางเพื่อเพิ่มเส้นทางไปยังผู้ดูแลระบบและเปลี่ยน AppComponent

เพิ่มเส้นทางไปที่app-routing.module.ts

ทำความสะอาดapp.component.htmlและเพิ่มโค้ดด้านล่าง

5. เรียกใช้แอปพลิเคชัน

ng serve host

การสร้างแอปพลิเคชันระยะไกลและการกำหนดค่า

1. สร้างแอปพลิเคชันระยะไกล 1 และแอปพลิเคชันระยะไกล 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. ตอนนี้เพิ่ม Module Federation Package ให้กับสามแอ็พพลิเคชัน

ng add @angular-architects/module-federation --project host --port 4200

ng add @angular-architects/module-federation --project remoteapp1 --port 5001

ng add @angular-architects/module-federation --project remoteapp2 --port 5002

6. ตอนนี้เปิดเผยโมดูลจากแอปพลิเคชันระยะไกลสำหรับ webpack.config.js ที่เปิดอยู่ใน remoteapp1 และ remoteapp2

7. จับโมดูลที่เปิดเผยในแอปพลิเคชันโฮสต์webpack.config.js

8. ตอนนี้กำหนดค่าการกำหนดเส้นทางในแอปพลิเคชันโฮสต์ app.module.ts

9. หลังจากกำหนดค่าเส้นทางแล้ว คุณได้รับข้อผิดพลาด เช่น ไม่พบโมดูล คุณต้องสร้าง decl.d.ts ในโฟลเดอร์แอปโฮสต์

10. หากคุณได้รับข้อผิดพลาดด้านล่างใน remoteapp1 และ remoteapp2 จากนั้นเพิ่ม home.module.ts ใน tsconfig (ไฟล์)

11. ตอนนี้จองรีโมตและแก้ไขโฮสต์ app.component.ts ตามด้านล่าง

12. ตอนนี้เปิดแอปพลิเคชันโฮสต์ในเบราว์เซอร์แล้วทดสอบ

การทำงาน……

ลิงค์ซื้อซ้ำ :https://github.com/GuruNadh552/Micro-Frontends-in-Angular

ขอขอบคุณหากคุณมีข้อสงสัยใดๆ วางข้อความในความคิดเห็น