Module 12: Installing Module Federation in Angular (Host and Remotes)

Installing Module Federation in Angular (Host and Remotes)

Lesson Overview

In this lesson, we will install and configure Module Federation in all three Angular projects.

At the end of this lesson:

• The Host application (vendas) will be configured as a Host
• The Remote applications (produtos and grafico) will be configured as Remotes
• All projects will be ready for integration

At this stage, we are only setting up the foundation.

No business logic or integration code yet — and that is intentional.

Understanding What We Are Installing

To enable Micro Frontends in Angular, we use:

Module Federation for Angular (by Angular Architects)

This library:

• integrates Module Federation with Angular
• configures Webpack automatically
• prepares Host and Remote applications correctly
• saves a large amount of manual setup

Internally, it uses Webpack 5 Module Federation, which is the industry standard.

Important Rule Before We Start

⚠️ Always run the installation command inside the project folder you are configuring.

Each Angular application:

• has its own configuration
• must be set up independently
• must know whether it is a Host or a Remote

Step 1: Installing Module Federation in the Host (Vendas)

First, open the terminal inside VS Code.

You can:

• use View → Terminal
• or press Ctrl + ' (backtick)

Clear the terminal:

clear

Now, navigate into the Host project:

cd vendas

Installing the Module Federation Library (Host)

Run the following command:

ng add @angular-architects/module-federation@20 \
  --project vendas \
  --port 4200 \
  --type host \
  --skip-confirmation

What This Command Does

• ng add → installs and configures the library
• @angular-architects/module-federation@20 → matches Angular 20
• --project vendas → applies configuration to the Host app
• --port 4200 → Host runs on port 4200
• --type host → marks this app as the Host
• --skip-confirmation → auto-confirms prompts

When prompted, choose:

Webpack Classic Module Federation

What Gets Configured Automatically

The command will:

• install required dependencies
• create webpack.config.js
• update Angular build configuration
• configure TypeScript settings
• prepare the project for Module Federation

At this point, no manual configuration is required.

Step 2: Reviewing the Host Configuration

Inside the vendas project, you will now see new files, especially:

webpack.config.js

In this file:

• the Host defines remote applications
• shared dependencies are configured
• the Module Federation plugin is initialized

For now:

• do not modify anything
• we will configure remotes later, step by step

Step 3: Installing Module Federation in the Produtos Remote

Now we move to the first Remote application.

Navigate to the produtos project:

cd ../produtos

Install Module Federation as a Remote:

ng add @angular-architects/module-federation@20 \
  --project produtos \
  --port 4201 \
  --type remote \
  --skip-confirmation

When prompted:

• choose Webpack Classic Module Federation

What's Different for a Remote?

Unlike the Host:

• Remotes do not define other applications
• Remotes expose modules instead of consuming them

You'll notice in webpack.config.js:

• there is an exposes section
• there is no remotes section

This is correct.

Step 4: Installing Module Federation in the Grafico Remote

Now repeat the process for the second Remote.

Navigate to the grafico project:

cd ../grafico

Install Module Federation:

ng add @angular-architects/module-federation@20 \
  --project grafico \
  --port 4202 \
  --type remote \
  --skip-confirmation

Again, select:

Webpack Classic Module Federation

The configuration process will complete automatically.

Step 5: Verifying All Configurations

At this point:

• vendas is configured as Host
• produtos is configured as Remote
• grafico is configured as Remote

Each project now contains:

• a webpack.config.js
• Module Federation setup
• correct port configuration
• Angular build integration

No application is connected yet — this is expected.

Understanding the Configuration Difference

Host (vendas)

• Defines remote URLs
• Controls orchestration
• Loads external modules

Remotes (produtos, grafico)

• Define exposed modules
• Do not know about the Host
• Remain fully independent

This separation is fundamental to Micro Frontend architecture.

What We Achieved in This Lesson

In this lesson, we:

• Installed Module Federation in all three Angular projects
• Correctly defined one Host and two Remotes
• Let the tooling configure Webpack automatically
• Avoided manual and error-prone setup
• Prepared the architecture for real integration

This is the hardest setup step — and it's now complete.

What's Next

In the next lesson, we will:

• Configure exposed modules in the Remote applications
• Register remote applications inside the Host
• Load Micro Frontends dynamically
• See multiple Angular applications working as one system

This is where the architecture becomes visible in the browser.

Schoolabe Insight

Good architecture is built incrementally.

By installing and validating Module Federation first —

without mixing business logic —

you dramatically reduce future debugging and confusion.

Foundations first. Integration next.