Angular 20+ Upgrades Without Outages: Defusing Angular CLI, TypeScript 5.x, and RxJS 7→8 Breaking Changes

Scene from the front lines

Telecom dashboard, 25K DAUs, live charts (D3/Highcharts), PrimeNG tables streaming via WebSockets. We upgraded Angular/CLI, moved to TypeScript 5.x, and finished the RxJS 8 migration in one week—zero customer tickets, zero downtime.

How? Canary releases, Firebase feature flags, CI matrices, and isolating breaking changes: Angular CLI first, TypeScript second, RxJS last.

Why this article now

• Angular 20+ continues the esbuild-first toolchain and stricter TS baselines.

• RxJS 8 removes long-deprecated APIs many enterprise apps still rely on.

• Budgets reset in January—Q1 is hiring season. Get your plan ready.

Angular CLI builder changes

If you relied on webpack-specific config or custom builders, your builds may silently diverge (e.g., CSS extraction, asset processing). Lock down angular.json and verify budgets early.

• esbuild-based application builder is default; custom webpack hooks may vanish.

• SSR/hydration flags and output hashing defaults shift across majors.

• Budgets and fileReplacements behave slightly differently under the new builder.

TypeScript 5.x realities

Angular peers TS closely. Mismatches produce type explosions, broken ts-node scripts, and flaky Jest/Karma configs. Surfacing these in a matrix build prevents Friday-night firefights.

• Stricter decorators, moduleResolution differences (bundler vs nodenext).

• lib/target defaults shift; strictness and inference expose latent bugs.

• Path alias + ESM edge cases surface quickly in CI.

RxJS 7→8 removals

Real-time dashboards with exponential backoff and retryWhen logic feel every RxJS change. Make those paths explicit, typed, and test-verified.

• toPromise is long gone; result selectors removed; operator imports simplified.

• Schedulers and interop types surface subtle behavior changes.

• Codemods get you 80% there; tests and typed event schemas finish the job.

1) Inventory, branch, and freeze drift

In Nx monorepos, run Affected to scope risk. For multi-tenant apps, segment routes and users for dark traffic canaries.

• Create an upgrade branch and freeze dependency drift via overrides.

• Document Node, npm, and CI image versions; align to Angular’s peers.

• Enable feature flags (Firebase Remote Config) to gate high‑risk paths.

2) Automate Angular + RxJS upgrades

Commands I actually run on engagements:

• Run dry updates in CI first, then locally.

• Apply codemods for RxJS and Angular templates where available.

Commands

# Angular core + CLI
npx ng update @angular/core @angular/cli --force --from=14 --to=20 --allow-dirty --migrate-only

# Material/PrimeNG (verify peer ranges first)
npx ng update @angular/material || echo 'Material not in use'

# RxJS codemods (community)
npx rxjs-ts-codemod --force || echo 'Review RxJS changes manually'

# Freeze transient drift during test cycles (npm >=8)
npm pkg set overrides.@types/node="^20" overrides.rxjs="^8"

3) Tame Angular CLI builder changes

// angular.json (excerpt)
{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/app",
            "budgets": [{ "type": "initial", "maximumWarning": "2MB", "maximumError": "3MB" }],
            "serviceWorker": true,
            "assets": ["src/favicon.ico", "src/assets"],
            "fileReplacements": [{
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }]
          }
        },
        "serve": { "builder": "@angular-devkit/build-angular:dev-server" }
      }
    }
  }
}

If you previously injected custom webpack, replace with official hooks or build-time scripts. Validate CSS extraction and critical CSS behavior; these move subtly across majors.

• Migrate to the application builder; verify output paths, budgets, and service worker.

• Check SSR/hydration flags and any image optimization toggles.

4) TypeScript 5.x tsconfig alignment

// tsconfig.json (excerpt)
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "nodenext",
    "useDefineForClassFields": true,
    "strict": true,
    "skipLibCheck": false,
    "types": ["node", "jest"],
    "paths": {
      "@app/*": ["src/app/*"],
      "@env": ["src/environments/environment"],
      "rxjs": ["./node_modules/rxjs"]
    }
  }
}

Watch for decorator metadata assumptions in older libs. If a third-party package lags, pin versions and isolate via an adapter layer.

• Prefer moduleResolution: nodenext (Node/SSR) or bundler (frontend-only).

• Temporarily set skipLibCheck to true only to unblock migration; re-enable later.

• Turn on strict: true and fix high-churn areas behind flags.

5) RxJS 7→8 migration patterns

// BEFORE (broken in RxJS 8)
const user = await http.get<User>(url).toPromise();

// AFTER
import { firstValueFrom, catchError, retry, timer } from 'rxjs';

async function fetchUser(url: string) {
  return firstValueFrom(
    http.get<User>(url).pipe(
      retry({
        count: 3,
        delay: (err, retryCount) => timer(Math.min(1000 * retryCount, 5000))
      }),
      catchError((e) => {
        // map to a typed domain error for telemetry
        throw { kind: 'UserFetchError', cause: e } as const;
      })
    )
  );
}

Operator imports: prefer importing from 'rxjs' when available in v8 to reduce tree-shake surprises. Audit ajax/webSocket utilities for ESM import correctness.

• Replace toPromise with firstValueFrom/lastValueFrom.

• Remove resultSelector overloads and prefer map/mergeMap pipes.

• Flatten retry/backoff logic into pure operators with typed errors.

6) CI matrix, Affected scope, and e2e

# .github/workflows/upgrade.yml
name: Upgrade Canaries
on: [pull_request]
jobs:
  build-test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [18, 20]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: ${{ matrix.node }}, cache: 'npm' }
      - run: npm ci
      - run: npx nx print-affected --target=build --select=projects
      - run: npx nx affected -t lint,test,build --parallel=3
      - run: npx cypress run --component || npx cypress run --spec 'cypress/e2e/smokes/**'

Surface TypeScript and RxJS issues early with multi-Node CI; some CI images lag glibc/Chrome versions.

• Test the new toolchain across Node LTS versions.

• Use Nx Affected to limit build/test scope and speed iteration.

• Run Cypress smoke tests per vertical (auth, dashboards, kiosk flows).

7) Rollout, telemetry, and rollback

Track Core Web Vitals and Lighthouse before/after. For SSR/hydration apps, capture hydration time and serialization errors. Alerts should flip the flag or slot back instantly.

• Canary + dark traffic via weighted routing (ALB/Nginx) or Azure Slots.

• Feature flags with Firebase Remote Config; ship toggled‑off first.

• Collect GA4, OpenTelemetry, and Firebase logs; wire error taxonomy.

Telecom advertising analytics platform

We isolated CLI and TS upgrades in week one, RxJS in week two, and only then introduced Signals in hot paths to cut renders. Angular DevTools flame charts showed a 35% render reduction post‑refactor.

• Angular 14→20, RxJS 8, PrimeNG, Nx monorepo.

• WebSocket telemetry with typed event schemas, exponential backoff.

• Results: -12% initial bundle, -28% TTI, 0 P1 incidents.

Airport kiosk device portal

Builder migrations broke a custom asset pipeline; we replaced it with documented hooks and rebuilt the service worker config. Canary slots let us validate peripheral APIs (card readers, printers, scanners) before country‑wide rollout.

• Offline‑tolerant flows, Docker hardware simulation in CI.

• Angular 15→20, TypeScript 5.3, strict mode enabled.

• Results: defect reproduction 10× faster, zero outages across 600+ kiosks.

Signals you need help now

If this sounds familiar, bring in a senior Angular consultant to stabilize the lane, set up guardrails, and ship the upgrade with a rollback plan. I handle this remotely and integrate with your PM/QA cadence.

• Every PR fights tsconfig, and CI failures are nondeterministic.

• SSR/hydration works locally but breaks in containers.

• RxJS 8 codemods passed, but runtime errors spike under load.

Engagement shape (typical)

For chaotic codebases, I use the same triage patterns I apply at gitPlumbers to stabilize your Angular codebase and reduce risk quickly.

• Discovery + codebase assessment (2–3 days).

• Upgrade lane execution + CI/CD hardening (1–2 weeks).

• State/UX optimizations with Signals/SignalStore (1–2 weeks).

Version pins that keep you sane

Document exact versions in your PR description and lock the CI container tags (Node, Chrome) so green stays green.

• Angular 20 peers TypeScript 5.x—match them.

• Pin RxJS 8 explicitly and run codemods before CI.

• Freeze transient drift with npm overrides during the window.

Don’t forget UX and a11y

Design tokens and accessible components keep UX from regressing while you modernize the toolchain.

• PrimeNG themes can shift; lock tokens and density.

• Run Lighthouse + Axe on canary; audit focus states post‑upgrade.