09

Module 9: Angular Module Federation Environment Setup

Chapter 9 • Beginner

20 min

Angular Module Federation Environment Setup

We use:

  • Node.js 23 - Latest LTS version
  • Angular 20 - Latest Angular version
  • Local CLI via npx - Version isolation

This ensures:

  • Version isolation
  • Reproducible builds
  • Professional development workflows

Prerequisites

Required Software

  • Node.js 23.x or higher
  • npm 10.x or higher
  • Git (for version control)
  • Code editor (VS Code recommended)

Verify Installation

bash.js
node --version  # Should show v23.x.x
npm --version   # Should show 10.x.x
git --version   # Any recent version

Node.js Installation

Windows

  1. Download Node.js 23 from [nodejs.org](https://nodejs.org)
  2. Run installer
  3. Verify: node --version

macOS

bash.js
# Using Homebrew
brew install node@23

# Or download from nodejs.org

Linux

bash.js
# Using nvm (recommended)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
nvm install 23
nvm use 23

Angular CLI Setup

Global Installation (Not Recommended)

bash.js
npm install -g @angular/cli@20

Local Installation (Recommended)

bash.js
# Create project directory
mkdir micro-frontends-workspace
cd micro-frontends-workspace

# Initialize npm
npm init -y

# Install Angular CLI locally
npm install --save-dev @angular/cli@20

# Use via npx
npx ng version

Why Local Installation?

  • ✅ Version isolation per project
  • ✅ Team consistency
  • ✅ No global conflicts
  • ✅ Reproducible builds

Workspace Setup

Create Workspace

bash.js
# Create workspace directory
mkdir micro-frontends-workspace
cd micro-frontends-workspace

# Initialize root package.json
npm init -y

Install Module Federation Plugin

bash.js
# Install @angular-architects/module-federation
npm install --save-dev @angular-architects/module-federation@latest

Project Structure

Initial Structure

code
micro-frontends-workspace/
├── package.json
├── package-lock.json
└── README.md

After Creating Apps

code
micro-frontends-workspace/
├── host-app/
├── products-app/
├── checkout-app/
├── package.json
└── README.md

VS Code Setup (Optional)

Recommended Extensions

  • Angular Language Service - Angular support
  • ESLint - Code linting
  • Prettier - Code formatting
  • GitLens - Git integration

Settings

json.js
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.preferences.importModuleSpecifier": "relative"
}

Verification

Check Node.js

bash.js
node --version
# Should output: v23.x.x

Check npm

bash.js
npm --version
# Should output: 10.x.x

Check Angular CLI

bash.js
npx ng version
# Should show Angular CLI version

Common Issues

Issue 1: Node Version Mismatch

Problem: Wrong Node.js version

Solution: Use nvm to switch versions

bash.js
nvm install 23
nvm use 23

Issue 2: Permission Errors

Problem: npm permission errors

Solution: Use local installation (npx) instead of global

Issue 3: Angular CLI Not Found

Problem: ng command not found

Solution: Use npx ng instead of ng

Next Steps

Environment is ready!

Next module: Creating the Host application.

Quick Reference

Commands

bash.js
# Check versions
node --version
npm --version
npx ng version

# Create Angular app
npx ng new app-name

# Serve app
npx ng serve app-name --port 4200

Project Structure

code
workspace/
├── host-app/
├── products-app/
├── checkout-app/
└── package.json

You're ready to start building!

Previous
Module 8: Angular Micro Frontend Project Architecture
Next
Module 10: Creating the Angular Host Application (Micro Frontend Architecture)

Related Tutorials