Zero‑Downtime Angular 11 ➜ 20 Upgrade: Play‑by‑Play Timeline, Breaking Changes, and Verified Performance Wins

Challenge

Ad ops relied on a multi‑tenant Angular 11 dashboard with real‑time creatives and pacing data. Traffic spikes were predictable (primetime), outages were not an option, and we had to unlock Angular 20 features (Vite builder, hydration, Signals path) without changing user muscle memory or KPIs.

Intervention

We treated the upgrade like a release train: progressive majors, Firebase preview channels, blue‑green deploys, and feature‑flagged toggles for risky switches (Material MDC, Vite builder, Typed Forms). CI enforced Lighthouse budgets, Cypress smokes, and instant rollback.

Result

Stakeholders got measurable wins, and the team got a maintainable path to Signals and standalone APIs without a risky rewrite.

• No downtime; zero open SEVs post‑cutover

• LCP 3.2s → 1.8s (p75 4G)

• JS bundle −37% (1.9MB → 1.2MB gzip)

• Route CPU idle −28%

• Dev build time −46% (Webpack → Vite)

Budget and risk

As enterprise budgets reset, you’re judged on risk: can we modernize to Angular 20+ without losing revenue minutes? With Angular 21 beta around the corner, staying on 11 is a compounding tax—security, hiring, and library stagnation.

What teams get

The business case is simple: better Core Web Vitals convert, and happier engineers ship more.

• Faster builds and reloads with Vite

• Hydration + event coalescing for quieter main thread

• A migration runway to Signals/SignalStore

• Typed Forms, better Material theming, and cleaner ESLint rules

Week 0–1: Assessment & guardrails

We used Nx to accelerate impact analysis and Firebase previews for stakeholder sign‑off without touching production.

• Inventory deps: Angular, RxJS, Material, PrimeNG, NgRx, build tools

• Set CI gates: unit, Cypress smoke, Lighthouse budgets, bundle size checks

• Enable Firebase Hosting preview channels and canary routing

Week 2–3: Pre‑work that pays off

This front‑loads low‑risk fixes so the version bumps become mechanical.

• TSLint → ESLint with autofixes

• RxJS 6 → 7: toPromise removed; tighten types

• Refactor deprecated APIs flagged by ng update

Week 4–6: Stepwise Angular majors

We never jump blind. Each major is its own PR with full previews, canary, and instant rollback.

• 11→12 (TS 4.2, AOT defaults), 12→13 (View Engine removal, IE11 dropped)

• 13→15 (Material MDC opt‑in behind flag, Component harness updates)

• 15→17 (Standalone optional, start moving router configs)

• 17→20 (Vite builder, hydration, newer TS/Node baselines)

Week 7: Cutover & stabilization

Total engineer time landed inside a six‑week window with zero downtime and measurable wins.

• Blue/green deploy during normal traffic to validate RUM

• Gradually increase canary from 5% → 100%

• Post‑deploy perf review and defect triage

RxJS 7 migration

A few hot paths used toPromise; we standardized on firstValueFrom with proper cancellation and error handling.

• Replace toPromise with firstValueFrom/lastValueFrom

• Audit scheduler edge cases and operator imports

Router resolver return types (v14+)

Typed resolvers surfaced a couple of null paths we fixed before prod.

• Resolvers must return Observable/T|UrlTree

• Removed implicit any and tightened generics

Angular Material MDC + theming

We staged MDC with a feature flag to avoid visual regressions in ad‑ops night mode.

• Tokenized themes and density

• Harness updates for MDC

Builder swap: Webpack → Vite

We rolled this behind an env flag for one release, then made it default after preview validation.

• Faster HMR and smaller vendor chunks

• Angular.json builder change + vite plugins

TSLint → ESLint

Autofixes handled 80%; we cleaned the rest with Nx affected scopes.

• ng add @angular-eslint/schematics

• Enable no‑floating-promises, rxjs/no-ignored-subscription

Where we used Signals

We didn’t rewrite NgRx. We used toSignal for read‑heavy UI, cut re-renders 22% in a hot dashboard, and reserved SignalStore for a localized component store where mutation frequency was high.

• Derived view state (computed) for chart ranges

• Bridged NgRx selectors via toSignal for widgets

• SignalStore for a single, high‑churn sidebar

Example: bridging selectors

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

export class PacingWidgetComponent {
  campaign$ = this.store.select(selectCurrentCampaign);
  campaign = toSignal(this.campaign$, { initialValue: null });
  range = computed(() => deriveRange(this.campaign()?.budget));
}

What protected us

We never deploy directly to prod; we promote from a tested preview channel with a single CLI command for rollback.

• Nx affected to scope tests

• Cypress smoke per route

• Lighthouse budgets per preview

• Firebase Hosting previews + channel promote

Workflow snippet

name: web
on:
  push:
    branches: [ main ]
jobs:
  build-test-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v2
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: npx nx affected -t lint,test,build --parallel
      - run: pnpm cypress run --component false --browser chrome --spec "cypress/e2e/smoke/**"
      - run: pnpm lhci autorun --config=.lighthouserc.cjs
      - run: pnpm firebase deploy --only hosting:preview --project ${{ secrets.FB_PROJECT }} --token ${{ secrets.FB_TOKEN }}
      - run: pnpm firebase hosting:channel:deploy prod-green --project ${{ secrets.FB_PROJECT }} --token ${{ secrets.FB_TOKEN }}

Feature flags

We used Firebase Remote Config to flip MDC theming and Vite builder for canaries without shipping new builds.

Core metrics

Measured via Firebase Performance and GA4 with build tag correlation to confirm the upgrade, not seasonality, drove the lifts. Angular DevTools confirmed fewer change detection cycles in hot widgets after toSignal adoption.

• LCP: 3.2s → 1.8s (p75 4G)

• JS bundle: −37%

• Route CPU idle: −28%

• Crash‑free sessions: 99.98% over 30 days

Developer experience

A happier team ships more—stakeholders felt it as faster iteration on ad units.

• Cold start −46%

• HMR near‑instant on widget edits

• CI time −23% with Nx affected

Good signals to bring help

If you need a remote Angular contractor who has executed this exact path for a telecom ads platform, a broadcast media scheduler, and a global entertainment employee system, I’m available. See how we stabilize chaotic code at gitPlumbers and then plan upgrades with confidence.

• Prod can’t go down, and you need a rollback plan you trust

• Angular ≤13 with mixed Material/PrimeNG and custom charts

• CI lacks preview channels or Lighthouse budgets

• State is NgRx‑heavy and you want a path to Signals without rewrites

No wholesale rewrite to standalone/Signals

Rewrites introduce risk. We upgraded first, then incrementally adopted standalone routing and Signals where profiling showed wins.

No SSR everywhere

Only the marketing landing got SSR; the internal ops dashboard didn’t benefit enough to justify complexity. Hydration remained available for future pivots.

Key lessons

If you’re planning Q1 upgrades, book a discovery call. Typical full upgrades run 4–8 weeks depending on test coverage. I bring Fortune 100 Angular experience and a repeatable path to zero‑drama releases.

• Treat each major as a release with previews and canaries

• Fix RxJS/ESLint early to defang the upgrade

• Adopt Vite and hydration behind flags, then promote

• Use Signals surgically to cut re‑renders in hot paths