Skip to main content

Sample MFE — Angular & Module Federation (walkthrough)

· 3 min read

I recently put together a sample micro-frontend (MFE) project to explore Module Federation with Angular and a small backend. This post summarizes the repo structure, how to run it locally, and the key lessons I learned while building it.

What this repo demonstrates​

  • An Angular monorepo containing multiple frontend apps:
    • Host: The container application that manages routing and dynamically loads remotes at runtime using Module Federation.
    • User-Feat: A remote application (a feature) consumed by the host.
    • Product-Feat: Another remote feature consumed by the host.
  • A simple backend built with Hono.js (an edge-friendly framework) that exposes routes for demo data (GET/POST/DELETE).

This setup aims to show a practical, minimal example of how to split a UI into independently-deployable feature apps while sharing code and runtime behavior.

How to run (quick)​

  1. Frontend
cd fe-apps
npm install
# Start frontend apps + backend (the repo includes a convenience script `run:all`)
npm run run:all
  1. Backend (if you want to run it separately)
cd be-apps
npm install
npm run dev

The run:all script in the frontend workspace boots the host and remotes together for local development.

Why Module Federation (brief)​

Module Federation allows multiple independently-deployed frontends to share code and load each other's modules at runtime. For teams, that means smaller, faster deployments and clearer ownership boundaries for feature teams.

What I learned / Tips​

  • Start small: build a single host + one remote first, then add more remotes.
  • Shared dependencies must be carefully managed (Angular core packages, RxJS, etc.) to avoid duplicate loads or runtime conflicts.
  • Use a consistent build/deploy pipeline for each micro-app to keep releases predictable.
  • Local developer experience matters: scripts like run:all make it much easier to iterate on host + remotes.
  • The backend in this repo (Hono.js) is intentionally minimal — it's there to provide a simple API for demos and to show how frontends can integrate with an edge-friendly server.

Where to look in the repo​

  • fe-apps/ — Angular workspace containing host and remotes
  • be-apps/ — Backend server (Hono.js) for demo data and routes
  • fe-app-order-feat/ — example of a feature app (Angular / web component sample)

Closing thoughts​

If you're evaluating micro-frontends for a large app, Module Federation is one of the pragmatic options: it reduces coupling while keeping runtime performance reasonable when configured correctly. This sample repo is meant as a starting point — clone it, run the scripts, and tweak the Module Federation config to see how remotes are exposed and consumed.

Find the full code and more examples on the repo: https://github.com/thanhnlh/sample-mfe