Angular Microfrontends

Learn Angular Microfrontends with Module Federation, independent deployments, shared libraries, routing, communication, enterprise architecture, best practices, and interview questions.

Modern enterprise applications often become too large for a single frontend team to develop and deploy efficiently.

Microfrontends solve this problem by dividing a large frontend application into multiple independent applications that work together as a single user experience.

Each Microfrontend can be:

Developed independently
Tested independently
Deployed independently
Owned by a different team
Scaled independently

Angular commonly implements Microfrontends using Webpack Module Federation.

What are Microfrontends?
Why Use Microfrontends?
Microfrontend Architecture
Monolith vs Microfrontends
Module Federation
Host and Remote Applications
Shared Libraries
Routing
Communication Between Microfrontends
Independent Deployment
Enterprise Banking Example
Best Practices
Common Mistakes
Top 10 Interview Questions
Interview Cheat Sheet
Summary

What are Microfrontends?

Microfrontends extend the Microservices architecture concept to the frontend.

Instead of one large Angular application, multiple smaller Angular applications collaborate to build the complete UI.

Each application owns a specific business capability.

Examples

Authentication
Customer Management
Payments
Loans
Investments
Reports

Why Use Microfrontends?

Benefits include:

Independent deployments
Team autonomy
Faster development
Better scalability
Easier maintenance
Technology flexibility (when appropriate)
Smaller codebases
Reduced deployment risk

High-Level Microfrontend Architecture

flowchart TD

Browser

Browser --> HostApplication

HostApplication --> AuthenticationApp

HostApplication --> CustomerApp

HostApplication --> PaymentApp

HostApplication --> LoanApp

HostApplication --> ReportApp

Monolithic Angular vs Microfrontends

Monolithic Application	Microfrontends
Single deployment	Independent deployments
One large codebase	Multiple smaller codebases
Shared release cycle	Independent release cycles
Large team coordination	Team autonomy
Difficult scaling	Business-domain scaling
Large builds	Smaller builds

Business Domain Architecture

flowchart LR

EnterprisePortal

EnterprisePortal --> Authentication

EnterprisePortal --> Customers

EnterprisePortal --> Accounts

EnterprisePortal --> Payments

EnterprisePortal --> Investments

EnterprisePortal --> Reports

Each business domain becomes an independently managed frontend.

Module Federation

Angular Microfrontends commonly use Webpack Module Federation.

Module Federation enables applications to:

Load remote applications
Share Angular libraries
Share components
Share services
Avoid duplicate framework downloads

Module Federation Architecture

flowchart LR

Host

Host --> RemoteOne

Host --> RemoteTwo

Host --> RemoteThree

RemoteOne --> SharedLibraries

RemoteTwo --> SharedLibraries

RemoteThree --> SharedLibraries

Host Application

The Host application acts as the application's entry point.

Responsibilities

Bootstrap the application
Configure routing
Load remote applications
Handle authentication
Share common libraries

The Host should remain lightweight.

Remote Applications

Each Remote application owns a business capability.

Examples

authentication-app

customer-app

payment-app

loan-app

report-app

Each Remote can:

Build independently
Deploy independently
Be versioned independently

Host and Remote Relationship

flowchart LR

Host

Host --> CustomerRemote

Host --> PaymentRemote

Host --> LoanRemote

CustomerRemote --> CustomerComponents

PaymentRemote --> PaymentComponents

LoanRemote --> LoanComponents

Example Module Federation Configuration

Host

remotes: {

customers:

'customers@http://localhost:4201/remoteEntry.js',

payments:

'payments@http://localhost:4202/remoteEntry.js'

}

Remote

exposes: {

'./CustomerModule':

'./src/app/customer/customer.module.ts'

}

Shared Libraries

Applications should share common dependencies.

Typical shared libraries

Angular Framework
Angular Router
RxJS
UI Component Library
Authentication SDK

Benefits

Smaller bundles
Consistent versions
Faster loading

Shared Library Architecture

flowchart LR

Host

Host --> Angular

Host --> RxJS

Host --> UILibrary

CustomerRemote --> Angular

PaymentRemote --> Angular

LoanRemote --> Angular

Routing

The Host controls top-level navigation.

Example

const routes: Routes = [

{

path: 'customers',

loadChildren: () =>

import('customers/Module')

.then(m => m.CustomerModule)

},

{

path: 'payments',

loadChildren: () =>

import('payments/Module')

.then(m => m.PaymentModule)

}

];

Users experience seamless navigation even though features come from different applications.

Routing Architecture

flowchart LR

Browser

Browser --> HostRouter

HostRouter --> CustomerRemote

HostRouter --> PaymentRemote

HostRouter --> LoanRemote

Communication Between Microfrontends

Microfrontends should communicate through well-defined contracts.

Common approaches

Shared services
Custom browser events
RxJS Subjects
Backend APIs
Global state (used sparingly)

Avoid tight coupling between applications.

Communication Architecture

flowchart LR

CustomerApp

CustomerApp --> EventBus

PaymentApp --> EventBus

LoanApp --> EventBus

EventBus --> HostApplication

Authentication

Authentication is usually centralized.

Typical flow

flowchart LR

User

User --> Host

Host --> AuthenticationService

AuthenticationService --> IdentityProvider

IdentityProvider --> JWT

JWT --> RemoteApplications

The Host authenticates the user and provides access tokens to remote applications as needed.

Independent Deployment

One of the biggest advantages of Microfrontends is deployment independence.

Example

Application	Deployment
Authentication	Daily
Customers	Weekly
Payments	Monthly
Reports	On Demand

Updating one application should not require rebuilding every other application.

Enterprise Banking Example

Large banking portal

Banking Portal

├── Authentication

├── Customer Portal

├── Accounts

├── Payments

├── Loans

├── Investments

├── Statements

└── Administration

Each business domain is owned by a dedicated engineering team.

Enterprise Architecture

flowchart TD

BankingPortal

BankingPortal --> AuthenticationHost

AuthenticationHost --> CustomerRemote

AuthenticationHost --> PaymentRemote

AuthenticationHost --> LoanRemote

AuthenticationHost --> InvestmentRemote

AuthenticationHost --> ReportsRemote

CI/CD Pipeline

flowchart TD

Developer

Developer --> Git

Git --> CustomerPipeline

Git --> PaymentPipeline

Git --> LoanPipeline

CustomerPipeline --> Production

PaymentPipeline --> Production

LoanPipeline --> Production

Every Microfrontend has its own build and deployment pipeline.

Performance Considerations

Practice	Benefit
Share Angular Framework	Smaller bundles
Lazy Load Remotes	Faster startup
Cache Remote Assets	Better performance
Load Features On Demand	Lower initial load
Optimize Shared Libraries	Reduced duplication
Independent Builds	Faster delivery
Monitor Bundle Size	Better performance
Use CDN	Faster downloads

Common Mistakes

Splitting Everything

Not every page should become a Microfrontend.

Split by business capability, not by individual components.

Keep applications loosely coupled.

Prefer events or APIs over large shared global state.

Version Conflicts

Ensure shared libraries use compatible versions across applications.

Large Host Application

The Host should coordinate applications, not contain business logic.

Ignoring User Experience

Users should experience a seamless application despite multiple underlying applications.

Microfrontend Best Practices

Practice	Recommendation
Organize by Business Domain	Yes
Independent Deployment	Yes
Share Framework Libraries	Yes
Loose Coupling	Yes
Lightweight Host	Yes
Lazy Load Remotes	Yes
Independent CI/CD	Yes
Standardized Contracts	Yes

Microservices vs Microfrontends

Microservices	Microfrontends
Backend Architecture	Frontend Architecture
Independent Services	Independent UI Applications
API Communication	UI Composition
Business Domains	Business Domains
Backend Teams	Frontend Teams
Separate Deployments	Separate Deployments

Advantages

Benefit	Description
Team Independence	Separate ownership
Independent Releases	Faster deployments
Better Scalability	Business-domain architecture
Easier Maintenance	Smaller codebases
Enterprise Ready	Supports large organizations
Technology Evolution	Gradual modernization

Interview Cheat Sheet

Topic	Recommendation
Architecture	Microfrontends
Runtime Composition	Module Federation
Entry Point	Host Application
Business Features	Remote Applications
Shared Dependencies	Angular + RxJS
Communication	Events / APIs
Routing	Host Controlled
Deployment	Independent
Scalability	Business Domains
Enterprise Projects	Team Ownership

Summary

Microfrontends enable enterprise Angular applications to scale by dividing the frontend into independently developed, tested, and deployed business-domain applications. Using Webpack Module Federation, a lightweight Host application can dynamically compose Remote applications while sharing common dependencies. Although Microfrontends introduce additional architectural complexity, they provide significant benefits for large organizations with multiple development teams and independently evolving products.

Key Takeaways

✅ Microfrontends divide a large frontend into smaller business-focused applications.
✅ Angular commonly implements Microfrontends using Webpack Module Federation.
✅ The Host application loads Remote applications dynamically.
✅ Organize Microfrontends by business domain, not UI components.
✅ Keep the Host lightweight and avoid embedding business logic.
✅ Share framework libraries carefully to improve performance.
✅ Prefer loosely coupled communication mechanisms.
✅ Independent CI/CD pipelines enable faster releases.
✅ Microfrontends are most valuable for large enterprise systems with multiple teams.
✅ Microfrontends are a common senior Angular architecture interview topic.

➡️ 122-Angular-Migration-Guide-QA.md