Plan and Execute Zero‑Downtime Angular 10–15 ➜ 20 Upgrades: Deprecations Map, Test Matrix, and One‑Command Rollbacks

A Real‑World Hook: Upgrade Like a Feature, Not a Fire Drill

Ship the upgrade behind flags, validate with a canary, and keep a rollback that’s faster than an incident bridge.

Plan the Upgrade: Inventory and Branch Strategy

If you’re in an Nx monorepo, scope work to affected apps and keep delivery moving.

Map Deprecations and Run Migrations with Guardrails

# Nx-based workspace
npx nx migrate @angular/core@20 @angular/cli@20
pnpm install  # or npm/yarn
npx nx migrate --run-migrations

# Non-Nx
ng update @angular/cli@20 @angular/core@20 --allow-dirty=false

# Material/PrimeNG after Angular core
ng update @angular/material@20
pnpm add primeng@^17 primeicons@latest  # match Angular 20 peer range

# RxJS 7+ if not already
ng update rxjs@7

Key deprecations to plan for:

• Standalone APIs: You can keep NgModules, but move providers to provideX() and adopt inject() gradually.

• Vite builder: Webpack builders are replaced; expect faster builds and slightly different env handling.

• SSR hydration: Switch to provideClientHydration() and ensure stable initial states for deterministic hydration.

• Router changes: Prefer functional guards/resolvers; audit initialNavigation and scrollPositionRestoration.

• HttpClient events: Ensure typed responses and interceptors are compatible; fix deprecated options.

• Material MDC + tokens: Align density/typography tokens; PrimeNG themes may need remap for AA.

• RxJS 7: audit toPromise removals, scheduler differences, and stricter typings.

Test Matrix That Prevents Midnight Rollbacks

// app.config.ts
import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideHttpClient } from '@angular/common/http';
import { provideClientHydration } from '@angular/platform-browser';
import { routes } from './app.routes';
import { remoteFlag } from './flags'; // your Firebase Remote Config or env-backed flag

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    ...(remoteFlag('enableHydration') ? [provideClientHydration()] : [])
  ],
};

This lets you roll the hydration switch separately from the Angular upgrade—vital when SSR bugs appear only under real traffic.

CI/CD Pipeline: Canaries, Health Checks, and a Real Rollback

name: ci-upgrade
on:
  push:
    branches: ["upgrade/angular20", "main"]

jobs:
  build-test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [20]
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node }}
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
      - run: pnpm nx affected -t lint,test,build --parallel=3
      - run: pnpm nx run app:e2e --configuration=canary
      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: web-dist
          path: dist/apps/app

  deploy-canary:
    needs: build-test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/download-artifact@v4
        with: { name: web-dist, path: dist/apps/app }
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: canary
          projectId: my-firebase-project
          entryPoint: ./

  promote-prod:
    if: github.ref == 'refs/heads/main'
    needs: deploy-canary
    runs-on: ubuntu-latest
    steps:
      - name: Promote canary to prod after manual approval
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT }}'
          channelId: live
          projectId: my-firebase-project
          entryPoint: ./

Rollback script (keep it next to your runbook):

#!/usr/bin/env bash
set -euo pipefail
# Roll back Firebase Hosting to a previously known-good version id
# You can capture version ids in a release artifact or query the API
GOOD_VERSION="$1" # e.g., 1234567890
SITE="my-firebase-site"

# Clone the old version to live instantly
firebase hosting:clone ${SITE}:versions/${GOOD_VERSION} ${SITE}:live --force

# Optional: flip hydration flag off if SSR contributed to the issue
firebase remoteconfig:versions:list # or call your config service
# then set enableHydration=false via API

If you’re on AWS, do blue‑green with two S3 buckets/CloudFront origins and a Lambda@Edge switch, or on Kubernetes use two versions behind a Service and flip weights. The principle is the same: promotion is a pointer move, and rollback is a pointer reset.

Handling UI Libraries Without UX Regression

No one wants an upgrade that feels different. Guard tokens, run visual diffs, and keep AA intact.

When to Hire an Angular Developer for Legacy Rescue

If the mandate is “don’t break production,” bring someone who has broken it in staging enough times to know how not to.

Example Upgrade Path with Nx and Feature Flags

Feature flags via Firebase Remote Config or a thin Node/.NET config service keep risky toggles independent of deploys.

Measure Success: What to Instrument Next

Tie every recommendation to a measurable outcome or it won’t stick with stakeholders.