modular software wrapper architecture example

Ng g -project mfe1 -port 4201 -type remote As in the previous article, we add and initialize the Module Federation plugin for the Micro Frontends: npm i -g -D The demo project used contains a shell and two Micro Frontends called mfe1 and mfe2. A more advanced approach, where we don’t even need to know the number of Micro Frontends upfront is presented afterwards. For this, we assume that we know the Micro Frontends upfront and just want to switch out their URLs at runtime, e. 📂 Source Code (full version) A Simple Dynamic Solution 📂 Source Code (simple version, see branch: simple) When clicking it, the Micro Frontend is loaded and displayed by the shell’s router. The following image displays the idea described in this article:įor all Micro Frontends the shell gets informed about at runtime, it displays a menu item. Make sure you have a fitting version if you try out the examples! For more details on the differences/ migration to Angular 14 please see this migration guide. Important: This article is written for Angular and Angular CLI 14 or higher.

While this file is a static JSON file in the examples shown here, it’s content could also come from a Web API. Instead, this information is provided at runtime via a configuration file. In this article, I’m assuming a more dynamic situation where the shell does not know the Micro Frontend upfront. As the shell’s webpack configuration describes the Micro Frontends, we already needed to know them when compiling it. In the previous article of this series, I’ve shown how to use Webpack Module Federation for loading separately compiled Micro Frontends into a shell. What’s New in our Module Federation Plugin 14.3?.Module Federation with Angular’s Standalone Components.Multi-Framework and -Version Micro Frontends with Module Federation: Your 4 Steps Guide.Pitfalls with Module Federation and Angular.Using Module Federation with (Nx) Monorepos and Angular.Getting Out of Version-Mismatch-Hell with Module Federation.Building A Plugin-based Workflow Designer With Angular and Module Federation.The Microfrontend Revolution: Module Federation with Angular.The Microfrontend Revolution: Module Federation in Webpack 5.

Modular software wrapper architecture example