Micro Frontend: Application using Angular

What are MicroFrontends?

MicroFrontends is an architectural style for building web applications by breaking them down into smaller, independent, and loosely coupled modules. Each module, or MicroFrontend, is developed and deployed independently, with its own set of dependencies, technologies, and teams.

From the user's point of view, they use one application. From the development point of view, you can serve them individually or package them all as one application using advanced techniques like module federation.

Key Steps to Implementing MicroFrontend in Angular

Break down the application into smaller, independent parts based on business domain or functionality

Create an Angular application for each MicroFrontend, with its own set of components, services, and modules

Define an API contract for communication between MicroFrontends (RESTful APIs, WebSockets, or custom events)

Use a module federation plugin to dynamically load MicroFrontends into the main application at runtime

Implement a shared module containing common code and components usable by multiple MicroFrontends

Use a centralised state management system (Redux or NgRx) to manage application state across MicroFrontends

Implement a consistent UI design system across MicroFrontends to ensure a cohesive user experience

MicroFrontends in Angular using Module Federation

HOST Application Configuration

Step 1: Create a workspace with no projects

ng new angular-mfe-example --create-application="false"

Step 2: Create the Host Application (Main Application)

This is the main application where we load all remote applications and configure routing for them.

ng g application host

Creating Remote Applications

Step 1: Create remote applications

ng new remoteapp1

ng new remoteapp2

Step 2: Create a home module in both applications

ng g m home

ng g c home

Step 3: Add the Module Federation Package

ng add @angular-architects/module-federation --project host --port 4200

ng add @angular-architects/module-federation --project remoteapp1 --port 5001 ng add @angular-architects/module-federation --project remoteapp2 --port 5002

This command creates Webpack config files and updates angular.json. Each application gets its own port, allowing them to run simultaneously and be loaded dynamically by the host application at runtime.

Benefits of This Architecture

Independent Deployments: Each MicroFrontend can be deployed independently without affecting others
Technology Agnostic: Different MicroFrontends can use different frameworks if needed
Team Autonomy: Different teams can own and deploy their respective MicroFrontends
Scalability: Scale individual parts of the application independently

Originally published on LinkedIn

Micro Frontend: Application using Angular