Angular microfrontend system with Angular, React and Svelte remotes

A small microfrontend monorepo demo with an Angular host and several microfrontends (Angular, React and a remote Svelte). The idea is to demonstrate different approaches to microfrontends via Module Federation, Native Federation and via <iframe>.

Quick overview

• backend/ - A small NodeJS web server that acts as a mock REST API which returns a list of available microfrontends from the apps.json.
• host-angular/ — Angular shell containing a navigation bar
• remote-angular-mf/ — an Angular Module federated remote
• remote-angular-nf/ — an Angular Native federated remote
• remote-angular-iframe/ — a standalone Angular application embedded using <iframe>
• remote-react-mf/ — a small React application with simple routing

Quick start (per project)

1. Open a terminal and change into the project folder.
2. Install its dependencies using npm install.
3. Start the dev server using npm run start, npm run dev or ng serve.
4. Go to http://localhost:4200.

Big shoutout to Manfred Steyer and his examples for setting up microfrontends. A lot of his examples were either reused here or have been an inspiration for this repository.