Module 15: Deploy Angular Micro Frontends Independently

Host:      https://app.example.com
Products:  https://products.example.com
Checkout:  https://checkout.example.com

// Production config
remotes: {
  products: 'products@https://products.example.com/remoteEntry.js',
  checkout: 'checkout@https://checkout.example.com/remoteEntry.js'
}

# Build Host
cd host-app
npx ng build --configuration production

# Build Products
cd products-app
npx ng build --configuration production

# Build Checkout
cd checkout-app
npx ng build --configuration production

dist/
├── host-app/
│   ├── index.html
│   ├── main.js
│   └── ...
├── products-app/
│   ├── remoteEntry.js    # Exposed module
│   ├── main.js
│   └── ...
└── checkout-app/
    ├── remoteEntry.js    # Exposed module
    ├── main.js
    └── ...

# .github/workflows/host-deploy.yml
name: Deploy Host
on:
  push:
    branches: [main]
    paths:
      - 'host-app/**'

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '23'
      - run: npm install
      - run: cd host-app && npm run build
      - run: deploy-to-production

# .github/workflows/products-deploy.yml
name: Deploy Products
on:
  push:
    branches: [main]
    paths:
      - 'products-app/**'

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '23'
      - run: npm install
      - run: cd products-app && npm run build
      - run: deploy-to-production

# Only Products app changes
git commit -m "Update products feature"
git push

# Only Products pipeline runs
# Host and Checkout unaffected

// Use versioned URLs
remotes: {
  products: 'products@https://products.example.com/v1.2.3/remoteEntry.js'
}

// environment.prod.ts
export const environment = {
  production: true,
  productsUrl: 'https://products.example.com',
  checkoutUrl: 'https://checkout.example.com'
}

// webpack.config.js
const isProduction = process.env.NODE_ENV === 'production'

const remotes = isProduction
  ? {
      products: 'products@https://products.example.com/remoteEntry.js',
      checkout: 'checkout@https://checkout.example.com/remoteEntry.js'
    }
  : {
      products: 'products@http://localhost:4201/remoteEntry.js',
      checkout: 'checkout@http://localhost:4202/remoteEntry.js'
    }

remotes: {
  products: 'products@https://cdn.example.com/products/v1.2.3/remoteEntry.js',
  checkout: 'checkout@https://cdn.example.com/checkout/v1.2.3/remoteEntry.js'
}

# Rollback Products to previous version
# Update Host config to point to old version
remotes: {
  products: 'products@https://products.example.com/v1.2.2/remoteEntry.js'
}

# Redeploy Host (no Products rebuild needed)

// Host can switch between versions
remotes: {
  products: process.env.PRODUCTS_VERSION === 'new'
    ? 'products@https://products.example.com/v2.0.0/remoteEntry.js'
    : 'products@https://products.example.com/v1.2.3/remoteEntry.js'
}

// Check if remote is available
async function checkRemoteHealth(url: string): Promise<boolean> {
  try {
    const response = await fetch(url)
    return response.ok
  } catch {
    return false
  }
}

// Track remote loading errors
loadChildren: () => import('products/ProductsModule')
  .then(m => m.ProductsModule)
  .catch(err => {
    // Log error
    errorTracking.log(err)
    // Fallback
    return import('./fallback/fallback.module')
      .then(m => m.FallbackModule)
  })