Zero‑Downtime Angular 11 → 20 Upgrade: Real Timeline, Breaking Changes, and Proven Performance Gains

What zero downtime looks like on a real Angular 11 → 20 upgrade

Project context and constraints

Week-by-week upgrade plan: Angular 11 to 20

Example commands we actually used (Nx monorepo):

# lock in ESLint first
npx ng add @angular-eslint/schematics@latest

# stepwise Angular upgrades (sample of the ladder)
npx ng update @angular/core@12 @angular/cli@12 --force
npx ng update @angular/core@13 @angular/cli@13 --force
npx ng update @angular/core@14 @angular/cli@14 --force
npx ng update @angular/core@15 @angular/cli@15 --force
npx ng update @angular/core@16 @angular/cli@16 --force
npx ng update @angular/core@20 @angular/cli@20 --force

# RxJS 7
npx rxjs-tslint --update-app
npm i rxjs@^7 --save

# migrate to Vite builder in Angular 16+
npx ng add @angular/build@^17

Breaking changes we handled and how

Representative RxJS changes:

// before (RxJS 6)
this.http.get<User>('/api/me').toPromise();

// after (RxJS 7)
import { firstValueFrom, throwError, timer } from 'rxjs';
import { mergeMap, retryWhen } from 'rxjs/operators';

const me = await firstValueFrom(this.http.get<User>('/api/me'));

// error factory signature + exponential backoff with jitter
const jitter = () => Math.random() * 300;

loadKPIs().pipe(
  retryWhen(errors => errors.pipe(
    mergeMap((err, i) => i >= 3
      ? throwError(() => err)
      : timer(2 ** i * 200 + jitter()))
  ))
);

Budgets we enforced:

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "budgets": [
                { "type": "initial", "maximum": "600kb" },
                { "type": "anyComponentStyle", "maximum": "10kb" }
              ]
            }
          }
        }
      }
    }
  }
}

CI/CD and zero‑downtime cutover

CI snippet (trimmed):

name: ci
on: [push, pull_request]
concurrency:
  group: ${{ github.ref }}
  cancel-in-progress: true
jobs:
  build-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci
      - run: npx nx affected -t lint,test,build --parallel
      - run: npx lhci autorun --upload.target=temporary-public-storage
  deploy-preview:
    if: github.event_name == 'pull_request'
    needs: build-test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx nx build app -c production
      - run: npx firebase deploy --only hosting:app --project $PROJECT --token $FIREBASE_TOKEN --non-interactive --except functions

Performance outcomes and what we measured

A minimal SignalStore used in one feature:

import { signal, computed } from '@angular/core';

export class KpiStore {
  private _items = signal<Kpi[]>([]);
  readonly count = computed(() => this._items().length);
  set(items: Kpi[]) { this._items.set(items); }
}

When to Hire an Angular Developer for Legacy Rescue

Related work: see gitPlumbers for code rescue (70% velocity lift, 99.98% uptime) and SageStepper for a live Angular 20 Signals app serving 320+ communities.

Concise takeaways and next steps

If you’re planning a 2025 roadmap, lock in your upgrade window before peak season. I can review your build, map the ladder, and co‑pilot delivery so your team keeps shipping features throughout.