Sample MFE – Angular Apps with Module Federation

Project Overview

This project demonstrates how to build a Micro Frontend (MFE) application using Module Federation with Angular 18. It includes both a frontend and a backend application.

Source code: https://github.com/thanhnlh/sample-mfe


This content originally appeared on DEV Community and was authored by tomyum

Project Overview

This project demonstrates how to build a Micro Frontend (MFE) application using Module Federation with Angular 18. It includes both a frontend and a backend application.

Source code: https://github.com/thanhnlh/sample-mfe

Frontend Application

The frontend application is structured as an Angular workspace using a monorepo. It consists of three Angular applications:

  1. Host: The host or container application. It manages the overall routing and dynamically loads other applications at runtime using Module Federation.
  2. User-Feat: A remote or child application that is consumed by the host application.
  3. Product-Feat: Another remote or child application that is also consumed by the host application.

Backend Application

The backend application is built with Hono.js, an ultra-fast web framework for edge computing. It provides routes with the following methods:

  1. GET: Retrieve routes configuration.
  2. POST: Add product to routes configuration.
  3. DELETE: Remove product from routes configuration.


This content originally appeared on DEV Community and was authored by tomyum


Print Share Comment Cite Upload Translate Updates
APA

tomyum | Sciencx (2024-07-21T11:55:27+00:00) Sample MFE – Angular Apps with Module Federation. Retrieved from https://www.scien.cx/2024/07/21/sample-mfe-angular-apps-with-module-federation/

MLA
" » Sample MFE – Angular Apps with Module Federation." tomyum | Sciencx - Sunday July 21, 2024, https://www.scien.cx/2024/07/21/sample-mfe-angular-apps-with-module-federation/
HARVARD
tomyum | Sciencx Sunday July 21, 2024 » Sample MFE – Angular Apps with Module Federation., viewed ,<https://www.scien.cx/2024/07/21/sample-mfe-angular-apps-with-module-federation/>
VANCOUVER
tomyum | Sciencx - » Sample MFE – Angular Apps with Module Federation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/07/21/sample-mfe-angular-apps-with-module-federation/
CHICAGO
" » Sample MFE – Angular Apps with Module Federation." tomyum | Sciencx - Accessed . https://www.scien.cx/2024/07/21/sample-mfe-angular-apps-with-module-federation/
IEEE
" » Sample MFE – Angular Apps with Module Federation." tomyum | Sciencx [Online]. Available: https://www.scien.cx/2024/07/21/sample-mfe-angular-apps-with-module-federation/. [Accessed: ]
rf:citation
» Sample MFE – Angular Apps with Module Federation | tomyum | Sciencx | https://www.scien.cx/2024/07/21/sample-mfe-angular-apps-with-module-federation/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.