Angular Multi-Repo Webpack Module Federation Example (Micro Frontends)

The Shell App

This repository is part of an Angular mlti-repo Webpack Module Federation example, which is explained in this readme. The example project consists of the followig repos:

• Shell App (this repository)
• Shared Lib
• Notification Domain App
• Weather Domain App

Module Federation can be used to composite multiple independet Angular apps on runtime in the Browser as so-called Micro Frontends (MFs). For more information on Micro Frontends and Module Federation take a look at Manfred Steyers Blog series.

Provide the Shell App

The shared lib is installed via static link to a tar file on GitHub, so this repo will run out of the box. However, if you want to change the shared lib and update it on your own, you need a local registry on port 4873, as described here.

Then run:

• npm i
• ng serve
• make sure, the other domains are also served as described in their readmes
  • Notification MF on port 5000
  • Weather MF on port 5100

Overview of the Domains/Repos

• Shell App

  • is not a true domain, but has some functionality and orchestrates all other domains
  • loads Webpack Module Federation remote entry files
  • responsible for authentication (represented by adding an user name via input field in this example)
  • defins basic styles (Bootstrap 5 CSS code in this example)

• Shared Lib

  • used for communication between the MFs

• Notification App

  • all components from this domain have a blue border for easy identification
  • provides an overview page on all created notification alerts as module
  • provides a component "Add Notification" to add a notification alert for a given location and type

• Weather App

  • all components from this domain have a yellow border for easy identification
  • provides a weather info page as module

Explanation for Example

follows soon