Angular MFE Prerequisites & Environment Setup | Complete Guide

Before diving into Angular Micro Frontend development, let’s ensure your development environment is properly configured with all the necessary tools and dependencies.

🛠️ Required Software & Tools

1. Node.js (v18 or Later)

Node.js is the foundation for Angular development and npm package management.

Installation Options:

Option A: Direct Download

# Visit https://nodejs.org and download LTS version
# Install the downloaded package

Option B: Using NVM (Recommended)

Unix/macOS:

# Install NVM (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# Restart terminal or source profile
source ~/.bashrc

# Install and use Node.js 18
nvm install 18
nvm use 18
nvm alias default 18

Windows:

# Step 1: Download and install nvm for Windows from:
Start-Process "https://github.com/coreybutler/nvm-windows/releases/latest/download/nvm-setup.exe"

# Step 2: Install Node.js version 18
nvm install 18

# Step 3: Use Node.js version 18 for current session
nvm use 18

# Step 4: Set Node.js version 18 as default
nvm alias default 18

Option C: Using Package Managers

Windows:

# Using Chocolatey
choco install nodejs

# Using Winget
winget install OpenJS.NodeJS

# Using Scoop
scoop install nodejs

macOS:

# Using Homebrew
brew install node

Ubuntu/Debian:

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

Verify Installation:

node --version    # Should show v18.x.x or later
npm --version     # Should show 8.x.x or later

---

2. Angular CLI (Latest Version)

The Angular CLI is essential for creating, building, and managing Angular applications.

Installation:

# Install Angular CLI globally
npm install -g @angular/cli@latest

# Verify installation
ng version

Expected Output:

Angular CLI: 17.x.x
Node: 18.x.x
Package Manager: npm 8.x.x
OS: [your-operating-system]

Update Existing Angular CLI:

# Uninstall old version
npm uninstall -g @angular/cli

# Clear cache
npm cache clean --force

# Install latest version
npm install -g @angular/cli@latest

---

3. Git & GitHub Setup

Version control is crucial for managing multiple MFE repositories.

Install Git:

Windows:

# Option 1: Download from official website
Start-Process "https://git-scm.com/download/win"

# Option 2: Using Chocolatey
choco install git

# Option 3: Using Winget
winget install Git.Git

macOS:

# Using Homebrew
brew install git

# Using Xcode Command Line Tools
xcode-select --install

Ubuntu/Debian:

sudo apt-get install git

Configure Git:

git config --global user.name "Your Name"
git config --global user.email "bnarayan.sharma@outlook.com"

# Verify configuration
git config --list

GitHub Setup:

1. Create GitHub account at https://github.com
2. Generate SSH key for secure access:

Unix/macOS:

# Generate SSH key
ssh-keygen -t ed25519 -C "bnarayan.sharma@outlook.com"

# Start SSH agent
eval "$(ssh-agent -s)"

# Add SSH key to agent
ssh-add ~/.ssh/id_ed25519

# Copy public key to clipboard
cat ~/.ssh/id_ed25519.pub

Windows:

# Generate SSH key
ssh-keygen -t ed25519 -C "bnarayan.sharma@outlook.com"

# Start SSH agent (in PowerShell as Administrator)
Start-Service ssh-agent
Set-Service -Name ssh-agent -StartupType Manual

# Add SSH key to agent
ssh-add $env:USERPROFILE\.ssh\id_ed25519

# Copy public key to clipboard
Get-Content $env:USERPROFILE\.ssh\id_ed25519.pub | Set-Clipboard

3. Add SSH key to GitHub:

   • Go to GitHub → Settings → SSH and GPG keys
   • Click “New SSH key”
   • Paste your public key

4. Test SSH connection:

ssh -T git@github.com

---

4. Code Editor: Visual Studio Code

VS Code provides excellent Angular development support with extensions.

Installation:

• Download from https://code.visualstudio.com/
• Install the appropriate version for your OS

Essential VS Code Extensions:

# Install extensions using VS Code command palette (Ctrl+Shift+P)
# or install via command line:

code --install-extension Angular.ng-template
code --install-extension ms-vscode.vscode-typescript-next
code --install-extension bradlc.vscode-tailwindcss
code --install-extension ms-vscode.vscode-json
code --install-extension esbenp.prettier-vscode
code --install-extension ms-vscode.vscode-eslint

Recommended Extensions List:

• Angular Language Service: IntelliSense for Angular templates
• TypeScript Importer: Auto import TypeScript modules
• Prettier: Code formatting
• ESLint: Code linting
• GitLens: Enhanced Git capabilities
• Bracket Pair Colorizer: Better code readability
• Auto Rename Tag: Rename paired HTML tags
• Angular Snippets: Code snippets for Angular

---

5. Package Managers & Build Tools

NPM (Included with Node.js):

# Verify npm installation
npm --version

# Update npm to latest version
npm install -g npm@latest

Yarn (Alternative Package Manager):

# Install Yarn globally
npm install -g yarn

# Verify installation
yarn --version

Webpack (For Module Federation):

# Webpack will be installed per project
# But you can install CLI globally for debugging
npm install -g webpack-cli

---

☁️ Cloud Platform Setup

Azure Account & Azure CLI

For deploying to Azure Static Web Apps:

Create Azure Account:

1. Visit https://azure.microsoft.com/free/
2. Sign up for free account (includes $200 credit)
3. Verify email and complete setup

Install Azure CLI:

Windows:

# Option 1: Download MSI installer
Start-Process "https://learn.microsoft.com/en-us/cli/azure/install-azure-cli-windows"

# Option 2: Using Chocolatey
choco install azure-cli

# Option 3: Using Winget
winget install Microsoft.AzureCLI

macOS:

# Using Homebrew
brew install azure-cli

Ubuntu/Debian:

curl -sL https://aka.ms/InstallAzureCLIDeb | sudo bash

Login to Azure:

# Login to Azure account
az login

# Verify login
az account show

Azure Static Web Apps CLI:

# Install Static Web Apps CLI
npm install -g @azure/static-web-apps-cli

# Verify installation
swa --version

---

🔧 Development Environment Configuration

Terminal/Command Line Setup

Windows Users:

• Windows Terminal (Recommended): Install from Microsoft Store
• PowerShell 7+: Download from GitHub releases
• Git Bash: Included with Git installation

macOS/Linux Users:

• Use default terminal or install iTerm2 (macOS) or Terminator (Linux)

Environment Variables

Create a global environment file for common environment variables:

Unix/macOS:

# Create global environment file
touch ~/.env

# Add common variables
echo "NODE_ENV=development" >> ~/.env
echo "ANGULAR_CLI_ANALYTICS=false" >> ~/.env

Windows:

# Create global environment file
New-Item -Path $env:USERPROFILE\.env -ItemType File -Force

# Add common variables
Add-Content -Path $env:USERPROFILE\.env -Value "NODE_ENV=development"
Add-Content -Path $env:USERPROFILE\.env -Value "ANGULAR_CLI_ANALYTICS=false"

# Alternative: Set system environment variables
[Environment]::SetEnvironmentVariable("NODE_ENV", "development", "User")
[Environment]::SetEnvironmentVariable("ANGULAR_CLI_ANALYTICS", "false", "User")

NPM Configuration

Configure npm for better performance and security:

Unix/macOS/Windows:

# Set npm registry (optional)
npm config set registry https://registry.npmjs.org/

# Disable analytics
npm config set analytics false

# Set cache location (optional)
npm config set cache ~/.npm-cache

Windows (PowerShell alternative):

# Set npm registry (optional)
npm config set registry https://registry.npmjs.org/

# Disable analytics
npm config set analytics false

# Set cache location (Windows-specific path)
npm config set cache "$env:USERPROFILE\.npm-cache"

---

📦 Project-Specific Tools

Module Federation Dependencies

These will be installed per project, but good to know:

# Core Module Federation packages
@angular-architects/module-federation
webpack
webpack-cli
@angular-builders/custom-webpack

Development Dependencies

Common dev dependencies for MFE projects:

# TypeScript
typescript
@types/node

# Testing
@angular/testing
jasmine
karma

# Linting
eslint
@typescript-eslint/parser
@typescript-eslint/eslint-plugin

# Build tools
@angular-devkit/build-angular

---

✅ Environment Verification Checklist

Run these commands to verify your setup:

System Check Script

Create a verification script:

Unix/macOS (check-environment.sh):

#!/bin/bash
echo "=== Angular MFE Environment Check ==="
echo ""

echo "Node.js version:"
node --version

echo "NPM version:"
npm --version

echo "Angular CLI version:"
ng version --skip-git

echo "Git version:"
git --version

echo "Azure CLI version:"
az --version | head -1

echo "VS Code version:"
code --version | head -1

echo ""
echo "=== Environment Check Complete ==="

Windows (check-environment.ps1):

Write-Host "=== Angular MFE Environment Check ===" -ForegroundColor Blue
Write-Host ""

Write-Host "Node.js version:" -ForegroundColor Green
node --version

Write-Host "NPM version:" -ForegroundColor Green
npm --version

Write-Host "Angular CLI version:" -ForegroundColor Green
ng version --skip-git

Write-Host "Git version:" -ForegroundColor Green
git --version

Write-Host "Azure CLI version:" -ForegroundColor Green
az --version | Select-Object -First 1

Write-Host "VS Code version:" -ForegroundColor Green
code --version | Select-Object -First 1

Write-Host ""
Write-Host "=== Environment Check Complete ===" -ForegroundColor Blue

Running the script:

Unix/macOS:

chmod +x check-environment.sh
./check-environment.sh

Windows:

# Enable script execution (run as Administrator if needed)
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

# Run the script
.\check-environment.ps1

Expected Versions Summary

Tool	Minimum Version	Recommended
Node.js	18.0.0	18.17.0+
NPM	8.0.0	9.0.0+
Angular CLI	15.0.0	17.0.0+
Git	2.20.0	2.40.0+
VS Code	1.70.0	Latest

---

🔍 Common Setup Issues & Solutions

Issue 1: Permission Errors with NPM

Unix/macOS:

# Solution: Configure npm to use different directory
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

# Add to ~/.bashrc or ~/.zshrc
export PATH=~/.npm-global/bin:$PATH

# Reload shell
source ~/.bashrc

Windows:

# Solution: Configure npm to use different directory
New-Item -Path "$env:USERPROFILE\.npm-global" -ItemType Directory -Force
npm config set prefix "$env:USERPROFILE\.npm-global"

# Add to PATH environment variable
$currentPath = [Environment]::GetEnvironmentVariable("Path", "User")
$newPath = "$env:USERPROFILE\.npm-global;$currentPath"
[Environment]::SetEnvironmentVariable("Path", $newPath, "User")

# Restart PowerShell for changes to take effect

Issue 2: Angular CLI Installation Fails

# Clear npm cache
npm cache clean --force

# Remove existing Angular CLI
npm uninstall -g @angular/cli

# Reinstall with specific version
npm install -g @angular/cli@latest

Issue 3: Git SSH Issues

# Test SSH connection
ssh -T git@github.com

# If issues, regenerate SSH key
ssh-keygen -t ed25519 -C "bnarayan.sharma@outlook.com" -f ~/.ssh/id_ed25519_new

# Add new key to SSH agent
ssh-add ~/.ssh/id_ed25519_new

Issue 4: VS Code Extensions Not Working

# Reset VS Code extensions
code --list-extensions
code --uninstall-extension <extension-id>
code --install-extension <extension-id>

---

🚀 Performance Optimization

Development Machine Optimization

Unix/macOS:

# Increase Node.js memory limit
export NODE_OPTIONS="--max-old-space-size=8192"

# Enable Angular CLI completion
ng completion bash >> ~/.bashrc  # or ~/.zshrc
source ~/.bashrc

Windows:

# Increase Node.js memory limit
[Environment]::SetEnvironmentVariable("NODE_OPTIONS", "--max-old-space-size=8192", "User")

# Enable Angular CLI completion (PowerShell)
ng completion powershell | Out-String | Invoke-Expression

# Add to PowerShell profile for persistence
ng completion powershell >> $PROFILE

NPM Performance

# Use npm ci for faster installs in CI/CD
npm ci

# Enable parallel installs
npm config set fund false
npm config set audit false

---

📚 Additional Setup Resources

Documentation Links

• Node.js Installation Guide
• Angular CLI Documentation
• Git Installation Guide
• VS Code Setup Guide
• Azure CLI Installation

Video Tutorials

• 🎥 Environment Setup Walkthrough
• 🎥 Angular CLI Deep Dive
• 🎥 VS Code for Angular Development

---

✅ What’s Next?

Once your environment is set up and verified:

1. ✅ Environment Setup Complete
2. ➡️ Continue to: Project Setup - Creating repositories and initial project structure
3. 📚 Learn More: Review Angular MFE Introduction if you haven’t already

Your development environment is now ready for Angular Micro Frontend development! 🚀