Zero‑Downtime Angular 11→20 Upgrade for a Telecom Analytics Dashboard: Timeline, Breaking Changes, and Measurable Wins

Constraints

We ran blue/green style deploys and canary routes. Canary users were opted in via a cookie header; everyone else stayed on the stable green environment. That gave us instant rollback but, more importantly, instant roll‑forward when confidence grew.

• Zero downtime—regulatory reporting windows could not slip.

• No visual regressions in core dashboards.

• Keep NgRx for now; incremental Signals adoption only in hot paths.

• Support SSO and existing interceptors; no auth flow churn.

Week 0 — Assessment + Guardrails

We recorded LCP/INP/TBT and error rate per route. That baseline is how you prove the upgrade helped, not just “didn’t break.”

• Angular DevTools profile to find hot components.

• Baseline metrics: Lighthouse CI, GA4 INP, Firebase Performance Monitoring.

• CI safety: Cypress smoke suite, bundle budgets, type checking strict.

Week 1 — 11→13→15 Hops

We kept RxJS on 7.8 to minimize risk. Protractor projects were replaced with Cypress. Typed forms surfaced a handful of control mismatches early—exactly where we wanted to find them.

• ng update @angular/core@13 @angular/cli@13, then to 15.

• Migrate TSLint remnants to ESLint.

• Start typed forms migration (Angular 14+).

Week 2 — 15→17 + Builder Change

This was the spiciest week: deleting custom webpack configs and migrating to the Angular Vite builder cut build times ~40% immediately.

• Switch to Angular’s Vite builder introduced in 17+ (now default by 20).

• Remove webpack‑specific customizations and obsolete polyfills.

• Enable deferrable views for non‑critical routes.

Week 3 — Library Upgrades + UI Safety

We used CI screenshots and a11y checks to guarantee no regressions in dense data tables. Design tokens insulated minor UI shifts.

• PrimeNG 17 upgrade with visual diff checks.

• Angular Material MDC migration for a small admin area.

• Tokenize spacing/color to absorb theme shifts.

Week 4 — 17→20, Canaries, and Rollout

We kept a hot rollback and a feature flag to disable deferrable views if hydration logs spiked. They didn’t—we rolled forward in under two days.

• ng update @angular/core@20 @angular/cli@20.

• Ship v20 to a 10% canary via header routing; watch errors and UX metrics.

• Increase to 50%, then 100% over 48 hours.

CLI and Framework Hops

Switch to Vite Builder

Typed Forms (14+)

// Before (Angular 11)
const form = this.fb.group({ count: [0], email: [''] });

// After (typed forms)
interface FiltersForm {
  count: FormControl<number>;
  email: FormControl<string>;
}

const form = new FormGroup<FiltersForm>({
  count: new FormControl(0, { nonNullable: true }),
  email: new FormControl('', { nonNullable: true })
});

• Fix FormGroup/Control generics.

• Convert any to explicit domain types.

• Update custom validators with correct signatures.

HTTP Interceptors Tightened Types

@Injectable({ providedIn: 'root' })
export class AuthInterceptor implements HttpInterceptor {
  constructor(private token: TokenService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authReq = req.clone({ setHeaders: { Authorization: this.token.bearer() }});
    return next.handle(authReq).pipe(
      catchError(err => err.status === 401 ? this.token.refresh().pipe(
        exhaustMap(() => next.handle(req.clone({ setHeaders: { Authorization: this.token.bearer() }})))
      ) : throwError(() => err))
    );
  }
}

• Align HttpEvent typing and clone usage.

• Centralize 401 refresh with typed exhaustMap.

Builder & Polyfills

Angular 20’s toolchain with the Vite builder and modern browsers made our legacy polyfills unnecessary. Bundle size dropped immediately.

• Remove custom webpack configs and differential loading.

• Trim polyfills now covered by modern targets.

Material MDC & PrimeNG 17

We leaned on CI visual diffs and design tokens to avoid “surprise” UI shifts—a common fear on exec calls.

• Adjust density and tokens to match legacy look.

• Swap deprecated selectors; fix icon baselines.

Zone‑heavy Patterns in Hot Components

We didn’t rewrite state; we targeted the top three offenders the Angular DevTools flame chart called out. This was enough to meaningfully move INP.

• Replace chatty inputs with Signals in key filters.

• Use runOutsideAngular for long‑running streams.

Routing Canaries with Headers

# firebase.json (excerpt) — canary via cookie header
hosting:
  rewrites:
    - source: "**"
      function: ssrApp
  headers:
    - source: "**"
      headers:
        - key: "Cache-Control"
          value: "public, max-age=300"
# Cloud Function inspects cookie and serves v20 or stable

• Cookie signals a “canary” user.

• Edge rewrites send canary traffic to v20 bundle.

Feature Flags

Firebase Remote Config let us swap UX behavior without a new deploy. When your CFO is watching, that flexibility matters.

• Remote flag to toggle deferrable views.

• Flag for Signals‑based filters vs legacy inputs.

Rollforward > Rollback

We wired GA4 INP and Firebase Perf thresholds into Slack. If error rate or INP spiked, we could shift traffic in under a minute.

• Keep both stacks hot for 48 hours.

• Automate error and UX metric alerts.

Bundle & Build

Switching to the Vite builder and deleting polyfills + differential loading did the heavy lifting. Dynamic importing Highcharts for non‑default routes finished the job.

• Bundle size: −23% main, −38% initial JS for charts route.

• Build time: −42% CI cold build; −70% with Nx caching.

Interaction & Hydration

Two hot filter components were converted to Signals. We replaced Input()/Output() chatter with computed() and a small SignalStore for derived state. No rewrite—just fewer change detection passes.

• INP median: 180ms → 120ms on filters‑heavy pages.

• Hydration cost: −18% on dashboards with deferrable views.

Stability

Typed forms killed several undefined issues in rarely tested branches. Canary routing avoided thundering‑herd deploy mistakes.

• Error rate: −36% (typed forms and interceptor fixes).

• Uptime during rollout: 100% (no 5xx bursts).

Targeted, Not Total

// A tiny SignalStore for a filter panel
import { signal, computed } from '@angular/core';

class FiltersStore {
  private _count = signal(0);
  private _email = signal('');
  readonly valid = computed(() => this._count() >= 0 && this._email().includes('@'));
  setCount(v: number) { this._count.set(v); }
  setEmail(v: string) { this._email.set(v); }
}

• Instrument first, migrate second.

• Convert the 20% of components causing 80% of churn.

Interop with RxJS

We kept RxJS at 7.8 and derived signals from selectors in the hot path. RxJS 8 came later behind a feature branch and compat helpers.

• Keep NgRx; derive signals from selectors.

• Don’t chase RxJS 8 on day one of an Angular upgrade.

Signs You’re Ready

If your roadmap assumes “we’ll upgrade later,” production risk is compounding. A focused 4–8 week engagement pays back quickly—often before quarter‑end.

• Angular <14 with untyped forms and custom webpack.

• High CI flake rate; no bundle budgets.

• Feature work blocked by outdated dependencies.

Post‑Upgrade Investments

We typically line up a follow‑on sprint to modernize state slices to SignalStore, enable SSR if needed, and expand our performance budgets to cover new routes.

• Visual regression in CI for every UI library bump.

• SSR hydration metrics if SEO matters.

• Schedule RxJS 8 and progressive standalone adoption.