Upgrading to Angular 20+: Survive CLI/Vite, TypeScript 5.x, and RxJS 7.8 Breaking Changes Without Downtime

A real upgrade failure I’ve seen (and fixed)

During an airport kiosk upgrade (12 → 20), prod kiosks booted into a white screen because a dev-only proxy wasn’t mirrored in the Vite server config, and toPromise was still lingering in an offline flow. We recovered with a Firebase canary rollback in minutes—but only because we had it rehearsed.

What changed between 12–20 that bites teams

• CLI now leans on Vite/esbuild; dev proxy and SSR glue changed.

• TypeScript 5.x enforces ESM and new module resolution behavior.

• RxJS 7.8 removes toPromise and tightens operator typings.

• Strict template/type checks and Standalone APIs surface latent issues.

• Node 18/20 LTS required in CI; older tooling silently misbehaves.

Freeze and snapshot

• git tag vBeforeUpgrade and push.

• Commit lockfile and engines field.

• Snapshot env, SSR, and build flags in CI.

Measure and monitor

• Lighthouse CI budget: LCP, INP, CLS.

• Angular DevTools profiler baseline flame chart.

• GA4 + Firebase Logs: error rate, slow endpoints.

• Feature flags wired (Firebase Remote Config or LaunchDarkly).

Canaries and rollbacks you can trust

With canaries I shipped a telecom analytics app’s 16 → 20 upgrade while reducing cold build from 7m → 3m and improving LCP by 22%—no maintenance window.

• Preview to Firebase Hosting channels per PR.

• Automate promote/demote within CI.

• Keep a kill switch for any new SSR/streaming path.

Switch to application/SSR builders deliberately

Angular 20 projects use the application builder with Vite for dev. Confirm builders and options in angular.json; don’t rely on defaults after a major bump.

angular.json snippet (browser/SSR)

Below is a safe baseline I use post-upgrade. Note: verify budgets, assets, and fileReplacements for each configuration.

tsconfig settings that bite (fix them first)

Align with CLI defaults, then tighten. If libraries or decorators behave oddly after the bump, these flags are the usual suspects:

tsconfig.json baseline

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "bundler",
    "useDefineForClassFields": false,
    "strict": true,
    "noImplicitOverride": true,
    "declaration": false,
    "types": ["node"],
    "paths": { "@app/*": ["src/app/*"], "@shared/*": ["src/app/shared/*"] }
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictTemplates": true
  }
}

ESM-only dependencies and path aliases

• Prefer ESM builds; avoid require in server code.

• Check package.json exports fields; TS bundler resolution follows them.

• Update ts-node/jest configs for ESM or run tests with Vitest/Web Test Runner.

Template types surface real issues

On a device management portal, strictTemplates flagged a latent undefined in a PrimeNG dropdown that only hit French locales. TypeScript 5.x caught it in CI; prod never saw it.

• Standalone + Signals narrow types in templates.

• Fix any $any casts; add explicit generics to Observables.

• Lean on Angular DevTools template profiler to confirm no extra change detection churn.

toPromise removal → firstValueFrom/lastValueFrom

// Before
const token = await api.refreshToken().toPromise();

// After (with timeout + typed errors)
import { firstValueFrom, timeout, catchError, throwError } from 'rxjs';

const token = await firstValueFrom(
  api.refreshToken().pipe(
    timeout(4000),
    catchError(err => throwError(() => new Error(`refresh-fail:${err?.message || err}`)))
  )
);

Typed catchError and return types

// Ensure catchError returns Observable<T>
getData(): Observable<Item[]> {
  return this.http.get<Item[]>(`/api/items`).pipe(
    retry({ count: 2, delay: 250 }),
    catchError((e: unknown) => {
      this.telemetry.error('items-load', e);
      return of([] as Item[]); // satisfy T
    })
  );
}

Prefer takeUntilDestroyed over manual Subject

import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

constructor(destroyRef: DestroyRef, private store: SignalStore) {
  this.store.items$ // if you still have streams
    .pipe(takeUntilDestroyed(destroyRef))
    .subscribe(items => this.itemsSignal.set(items));
}

Token/density shifts show up as layout bugs

I pair PrimeNG upgrades with visual testing to avoid “pixel drift.” In a broadcast media scheduler, this caught a density change in p-table that would have added 3 extra scrolls per shift.

• Audit PrimeNG version jump alongside Angular.

• Lock design tokens; run visual snapshots in CI.

• Respect prefers-reduced-motion on upgraded animations.

Run migrations progressively (Nx + Angular CLI)

# preview and apply Angular migrations
npx ng update @angular/core@20 @angular/cli@20 --migrate-only --force

# orchestrate workspace changes with Nx
npx nx migrate latest
npm install
npx nx migrate --run-migrations

CI: Node, caching, and preview channels

name: build-test-canary
on: [push]
jobs:
  ci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci
      - run: npm run test:ci
      - run: npm run build:ssr
      - run: npx lhci autorun --upload.target=temporary-public-storage
      - name: Deploy preview
        run: npx firebase deploy --only hosting:app --project myproj --non-interactive --expires 7d

Guarded rollout and rollback

In gitPlumbers, this playbook drove a 70% delivery velocity boost and 99.98% uptime across modernization sprints. Contract tests + canaries = courage to merge.

• Feature flags wrap SSR/streaming paths.

• Promote/demote between Firebase channels in seconds.

• Telemetry hooks emit upgrade-specific events (typed schemas).

Signals you need outside help

• Green CI, red prod (proxy/SSR/env drift).

• RxJS and TypeScript errors tangled together.

• Karma/Jasmine legacy, no SSR tests, no canaries.

• Multiple apps/packages stuck across versions.

How an Angular consultant de-risks upgrades

I’ve done this for an insurance telematics dashboard (Signals + SignalStore + typed WebSockets), an airline kiosk with Docker-based hardware simulation, and a telecom analytics portal serving millions of events/hour. If you need a remote Angular developer with Fortune 100 experience, I can help.

• 48-hour assessment: CLI/TS/RxJS diff, env drift, risk register.

• One-week plan: codemods, CI updates, lighthouse budgets, rollback tests.

• Parallel delivery: features keep shipping behind flags.

Scripts that survive upgrades

{
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "build:ssr": "ng build && ng run app:server",
    "serve:ssr": "node dist/app-server/main.js",
    "test:ci": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
    "lint": "ng lint",
    "affected": "nx affected --target=build --parallel",
    "migrate": "nx migrate latest && nx migrate --run-migrations"
  }
}