MicroFrontend là gì?

MicroFrontends là một phong cách kiến ​​trúc để xây dựng các ứng dụng web bằng cách chia nhỏ chúng thành các mô-đun nhỏ hơn, độc lập và được liên kết lỏng lẻo. Mỗi mô-đun, hay MicroFrontend, được phát triển và triển khai độc lập, với tập hợp các phụ thuộc, công nghệ và nhóm riêng.

Việc triển khai MicroFrontend trong Angular 15 liên quan đến việc chia nhỏ ứng dụng thành các phần nhỏ hơn để có thể phát triển và triển khai độc lập. Mỗi MicroFrontend nên có ứng dụng Angular riêng, với bộ thành phần, dịch vụ và mô-đun riêng.

Các bước chính để triển khai MicroFrontend trong Angular 15:

1. Chia nhỏ ứng dụng thành các phần nhỏ hơn, độc lập dựa trên lĩnh vực kinh doanh hoặc chức năng.
2. Tạo một ứng dụng Angular cho mỗi MicroFrontend, với bộ thành phần, dịch vụ và mô-đun riêng.
3. Xác định hợp đồng API để liên lạc giữa các MicroFrontend. Đây có thể là API RESTful, WebSockets hoặc sự kiện tùy chỉnh.
4. Sử dụng plugin liên kết mô-đun để tải động MicroFrontends vào ứng dụng chính khi chạy. Liên kết mô-đun là một tính năng trong Webpack cho phép nhiều ứng dụng chia sẻ mã khi chạy.
5. Triển khai một mô-đun dùng chung có chứa mã chung và các thành phần có thể được sử dụng bởi nhiều MicroFrontend.
6. Sử dụng hệ thống quản lý trạng thái tập trung, chẳng hạn như Redux hoặc NgRx, để quản lý trạng thái ứng dụng trên MicroFrontends.
7. Triển khai hệ thống thiết kế giao diện người dùng nhất quán trên MicroFrontends để đảm bảo trải nghiệm người dùng gắn kết.

MicroFrontends trong Angular sử dụng Liên kết mô-đun

Cấu hình ứng dụng HOST

1. Tạo ứng dụng máy chủ

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

2. Tạo host app (Ứng dụng chính)

Đây là Ứng dụng chính nơi chúng tôi nhận tất cả các ứng dụng từ xa và định cấu hình định tuyến cho chúng.

ng g application host

4. Cập nhật Route để thêm đường dẫn đến quản trị viên và thay đổi AppComponent

Thêm Tuyến vào app-routing.module.ts

Dọn dẹp app.component.html và thêm mã bên dưới

5. Chạy ứng dụng

ng serve host

Tạo một ứng dụng và cấu hình từ xa

1. Tạo ứng dụng từ xa 1 và ứng dụng từ xa 2

ng new remoteapp1
ng new remoteapp2

ng g m home
ng g c home

      
                

                    
                    
                
            

      
                

                    
                    
                
            

5. Bây giờ thêm Gói liên kết mô-đun vào ba ứng dụng

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. Bây giờ hãy hiển thị các mô-đun từ Ứng dụng từ xa cho webpack.config.js đang mở đó trong remoteapp1 và remoteapp2

7. Bắt các mô-đun Exposed trong ứng dụng máy chủ webpack.config.js

8.Bây giờ hãy định cấu hình định tuyến trong ứng dụng máy chủ app.module.ts

9. Sau khi Định cấu hình các tuyến đường, bạn gặp lỗi như không tìm thấy mô-đun. bạn cần tạo một decl.d.ts trong thư mục ứng dụng máy chủ.

10. Sau đó, nếu bạn gặp lỗi bên dưới trong remoteapp1 và remoteapp2 . sau đó thêm home.module.ts trong tsconfig (tệp).

11. Bây giờ hãy đặt điều khiển từ xa và sửa đổi máy chủ app.component.ts như bên dưới

12. Bây giờ hãy mở ứng dụng máy chủ trong trình duyệt và kiểm tra nó.

Đang làm việc……

Liên kết repo:https://github.com/GuruNadh552/Micro-Frontends-in-Angular

Cảm ơn bạn nếu bạn có bất kỳ nghi ngờ. gửi tin nhắn trong các bình luận