Backend interview prep

Start

Module Federation in Angular

Learn Angular Module Federation with Webpack, Host and Remote applications, runtime module loading, shared libraries, Microfrontends, enterprise architecture, best practices, and interview questions.

Module Federation is a Webpack feature that allows multiple independent applications to share code at runtime.

Instead of bundling everything into one large Angular application, Module Federation enables applications to:

  • Load remote modules dynamically
  • Share Angular libraries
  • Share UI components
  • Share services
  • Deploy independently
  • Scale independently

It is the foundation of many Angular Microfrontend architectures.

Table of Contents

  1. What is Module Federation?
  2. Why Use Module Federation?
  3. How Module Federation Works
  4. Host and Remote Applications
  5. Runtime Module Loading
  6. Shared Dependencies
  7. Webpack Configuration
  8. Routing with Module Federation
  9. Version Sharing
  10. Enterprise Banking Example
  11. Performance Considerations
  12. Best Practices
  13. Common Mistakes
  14. Top 10 Interview Questions
  15. Interview Cheat Sheet
  16. Summary

What is Module Federation?

Module Federation is a Webpack 5 capability that enables one application to load modules exposed by another application at runtime.

Unlike traditional builds, applications do not need to be bundled together before deployment.

Each application can:

  • Build independently
  • Deploy independently
  • Update independently
  • Share common dependencies

Why Use Module Federation?

Benefits include:

  • Independent deployments
  • Faster releases
  • Smaller bundles
  • Better scalability
  • Shared Angular framework
  • Reduced duplicate code
  • Team autonomy
  • Runtime module loading

High-Level Architecture

flowchart TD

Browser

Browser --> HostApplication

HostApplication --> CustomerRemote

HostApplication --> PaymentRemote

HostApplication --> ReportRemote

CustomerRemote --> Backend

PaymentRemote --> Backend

ReportRemote --> Backend

Traditional Build vs Module Federation

Traditional Angular Module Federation
Single deployment Independent deployments
Single bundle Multiple runtime bundles
Large application Smaller applications
Tight coupling Loose coupling
Shared release cycle Independent release cycle
Difficult scaling Easier scaling

How Module Federation Works

The Host application requests remote modules during application execution.

sequenceDiagram

participant Browser

participant Host

participant Remote

participant Backend

Browser->>Host: Open Application

Host->>Remote: Load Remote Module

Remote-->>Host: Module

Host->>Backend: API Request

Backend-->>Host: Response

Host-->>Browser: Render UI

Core Components

Component Responsibility
Host Loads remote applications
Remote Exposes modules
Shared Libraries Prevent duplicate dependencies
Remote Entry Entry point for exposed modules
Webpack Runtime module loading

Host Application

The Host application:

  • Boots the application
  • Configures routing
  • Loads remotes
  • Shares dependencies
  • Handles authentication

Example

Host

↓

Customer Remote

↓

Payment Remote

↓

Reports Remote

The Host should remain lightweight.

Remote Applications

Each Remote owns one business capability.

Example

customer-app

payment-app

loan-app

report-app

Each Remote:

  • Has its own repository (optional)
  • Has its own deployment
  • Has its own build pipeline

Host and Remote Architecture

flowchart LR

Host

Host --> CustomerRemote

Host --> PaymentRemote

Host --> LoanRemote

CustomerRemote --> CustomerComponents

PaymentRemote --> PaymentComponents

LoanRemote --> LoanComponents

Webpack Configuration

Host configuration

remotes: {

customers:

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

payments:

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

}

Remote configuration

exposes: {

'./CustomerModule':

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

}

Runtime Loading

Unlike static imports:

import {

CustomerModule

}

from './customer';

Module Federation loads modules dynamically.

Example

loadChildren: () =>

import(

'customers/Module'

)

.then(

m => m.CustomerModule

)

Only the requested remote is downloaded.

Runtime Loading Architecture

flowchart LR

Browser

Browser --> Host

Host --> RemoteEntry

RemoteEntry --> CustomerModule

CustomerModule --> AngularComponents

Shared Dependencies

Shared dependencies prevent duplicate framework downloads.

Typical shared packages

  • Angular Core
  • Angular Router
  • RxJS
  • UI Library
  • Authentication SDK

Example

shared: {

'@angular/core': {

singleton: true,

strictVersion: true

},

'@angular/router': {

singleton: true

}

}

Benefits

  • Smaller bundles
  • Faster startup
  • Consistent framework versions

Version Sharing

Module Federation allows applications to share framework libraries.

Recommended approach

  • Share Angular packages
  • Share RxJS
  • Keep compatible versions
  • Use singleton dependencies

Avoid mixing incompatible Angular versions unless you have a carefully planned migration strategy.

Routing with Module Federation

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 navigate normally while modules are loaded dynamically.

Routing Flow

flowchart LR

Browser

Browser --> HostRouter

HostRouter --> CustomerRemote

HostRouter --> PaymentRemote

HostRouter --> LoanRemote

Communication Between Remotes

Remotes should communicate through well-defined interfaces.

Common approaches

  • Shared services
  • Browser events
  • RxJS Subjects
  • Backend APIs
  • Shared authentication

Avoid direct dependencies between Remote applications.

Communication Architecture

flowchart LR

CustomerRemote

CustomerRemote --> EventBus

PaymentRemote --> EventBus

LoanRemote --> EventBus

EventBus --> Host

Authentication

Authentication is usually centralized.

flowchart LR

User

User --> Host

Host --> AuthService

AuthService --> IdentityProvider

IdentityProvider --> JWT

JWT --> CustomerRemote

JWT --> PaymentRemote

The Host authenticates users before loading protected Remote applications.

Enterprise Banking Example

Large banking portal

Banking Portal

├── Host

├── Customer Remote

├── Accounts Remote

├── Payment Remote

├── Loans Remote

├── Investments Remote

├── Reports Remote

└── Admin Remote

Each Remote can be deployed without rebuilding the others.

Enterprise Architecture

flowchart TD

Host

Host --> Authentication

Host --> CustomerRemote

Host --> PaymentRemote

Host --> InvestmentRemote

Host --> ReportRemote

Authentication --> IdentityProvider

CustomerRemote --> Backend

PaymentRemote --> Backend

InvestmentRemote --> Backend

ReportRemote --> Backend

CI/CD Pipeline

flowchart TD

Developer

Developer --> Git

Git --> CustomerPipeline

Git --> PaymentPipeline

Git --> ReportPipeline

CustomerPipeline --> Production

PaymentPipeline --> Production

ReportPipeline --> Production

Each Remote has an independent build and deployment pipeline.

Performance Considerations

Practice Benefit
Share Angular Packages Smaller bundles
Lazy Load Remotes Faster startup
Share RxJS Avoid duplication
Cache Remote Entry Files Better performance
Optimize Bundle Size Faster downloads
Use CDN Lower latency
Keep Host Lightweight Faster bootstrap
Monitor Runtime Loading Better user experience

Common Mistakes

Making the Host Too Large

The Host should coordinate applications, not contain major business logic.

Sharing Every Library

Share only stable, common dependencies.

Avoid unnecessary sharing of feature-specific libraries.

Version Mismatches

Using incompatible Angular versions across applications can cause runtime failures.

Tight Coupling

Remote applications should remain independent.

Avoid importing one Remote directly into another.

Ignoring Runtime Failures

Always handle cases where a Remote cannot be loaded.

Provide graceful fallback pages or error handling.

Module Federation Best Practices

Practice Recommendation
Lightweight Host Yes
Independent Remotes Yes
Share Angular Packages Yes
Lazy Load Features Yes
Use Singleton Dependencies Yes
Handle Runtime Errors Yes
Independent CI/CD Yes
Monitor Bundle Size Yes

Module Federation vs Traditional Angular

Traditional Angular Module Federation
Static Build Runtime Loading
Single Deployment Independent Deployments
Single Bundle Multiple Bundles
Tight Coupling Loose Coupling
Shared Release Independent Release
Monolithic Frontend Microfrontend Architecture

Advantages

Benefit Description
Runtime Loading Load features only when needed
Independent Deployments Faster releases
Shared Dependencies Smaller bundles
Better Scalability Team ownership
Enterprise Ready Supports Microfrontends
Reduced Risk Independent deployments reduce release impact

Top 10 Module Federation Interview Questions

1. What is Module Federation?

Answer

Module Federation is a Webpack 5 feature that enables applications to load modules from other applications dynamically at runtime.

2. Why use Module Federation?

Answer

It enables independent deployments, runtime loading, shared dependencies, team autonomy, and scalable Microfrontend architectures.

3. What is a Host application?

Answer

The Host application bootstraps the application, manages routing, loads Remote applications, and coordinates shared services such as authentication.

4. What is a Remote application?

Answer

A Remote application exposes modules that can be loaded dynamically by a Host application.

5. What is remoteEntry.js?

Answer

remoteEntry.js is the entry file generated by Module Federation that contains metadata about the modules exposed by a Remote application.

6. Why share Angular dependencies?

Answer

Sharing Angular packages avoids duplicate downloads, reduces bundle size, and helps maintain a consistent runtime environment.

7. Can Module Federation support lazy loading?

Answer

Yes. Remote modules are typically loaded lazily when users navigate to the corresponding feature.

8. What are common Module Federation challenges?

Answer

  • Dependency version conflicts
  • Runtime loading failures
  • Cross-application communication
  • Shared authentication
  • Operational complexity

9. How should Remote applications communicate?

Answer

Use well-defined APIs, shared services, browser events, or backend communication while keeping applications loosely coupled.

10. What are Module Federation best practices?

Answer

  • Keep the Host lightweight
  • Organize by business domains
  • Share stable dependencies
  • Lazy load Remote applications
  • Handle runtime failures gracefully
  • Use independent CI/CD pipelines
  • Monitor bundle size and performance

Interview Cheat Sheet

Topic Recommendation
Runtime Loading Module Federation
Entry Application Host
Business Features Remote Applications
Runtime Manifest remoteEntry.js
Shared Framework Angular + RxJS
Routing Host Controlled
Deployment Independent
Architecture Microfrontends
Performance Shared Dependencies
Enterprise Systems Module Federation

Summary

Module Federation enables Angular applications to load features dynamically from independently deployed applications at runtime. By separating applications into a lightweight Host and multiple Remote applications, teams can deliver features independently while sharing common dependencies such as Angular and RxJS. Combined with Microfrontend architecture, Module Federation provides a scalable solution for large enterprise applications where multiple teams need to work and release independently.

Key Takeaways

  • ✅ Module Federation is built on Webpack 5.
  • ✅ It enables runtime loading of Remote applications.
  • ✅ A lightweight Host coordinates Remote applications.
  • ✅ remoteEntry.js exposes modules to the Host.
  • ✅ Share Angular and RxJS as singleton dependencies.
  • ✅ Lazy loading improves startup performance.
  • ✅ Independent deployments accelerate release cycles.
  • ✅ Handle runtime failures with graceful fallbacks.
  • ✅ Module Federation is a core technology for Angular Microfrontends.
  • ✅ Module Federation is a popular senior Angular architecture interview topic.

Next Article

➡️ 124-Angular-Enterprise-Architecture-QA.md