Chronicle’s Angular 14→20 Upgrade Without Losing Velocity: Nx, Signals, Canary CI, and Feature Flags

The sprint where upgrades couldn’t wait: Chronicle’s 14→20 ladder

Why Angular upgrades break velocity—and how to avoid it

Implementation: the rung plan, Nx canaries, and Signals adapters

Example rung commands we actually ran (pinned to avoid surprise transitive updates):

# Rung 1: 14 -> 16 (TS bump + ESM prep)
ng update @angular/core@16 @angular/cli@16 --allow-dirty --force
npm i -D typescript@5.2 @types/node@18

# Rung 2: 16 -> 17 (builder + test harness updates)
ng update @angular/core@17 @angular/cli@17 --force

# Rung 3: 17 -> 18 (zoned to zone-friendly signals, optional SSR prep)
ng update @angular/core@18 @angular/cli@18 --force

# Rung 4: 18 -> 20 (Signals-first APIs and builder)
ng update @angular/core@20 @angular/cli@20 --force
npm dedupe
npm run affected:test

Typed Signals adapter used in Chronicle to bridge a live RxJS stream without losing determinism:

import { computed, signal } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { SignalStore } from '@ngrx/signals';
import { Observable, of } from 'rxjs';
import { catchError, distinctUntilChanged, map, startWith } from 'rxjs/operators';

type Telemetry = { ts: number; load: number; region: string };

type State = {
  telemetry$: Observable<Telemetry[]>;
  selectedRegion: string | null;
};

export class TelemetryStore extends SignalStore<State> {
  private selectedRegion = signal<string | null>(null);

  // Stable initial value prevents SSR/test flakiness
  private telemetry = toSignal(this.state.telemetry$.pipe(
    map(list => list ?? []),
    startWith([] as Telemetry[]),
    catchError(() => of([] as Telemetry[])),
    distinctUntilChanged()
  ), { initialValue: [] });

  readonly filtered = computed(() => {
    const region = this.selectedRegion();
    const data = this.telemetry();
    return region ? data.filter(d => d.region === region) : data;
  });

  setRegion(r: string | null) { this.selectedRegion.set(r); }
}

GitHub Actions canary that guarded Chronicle’s upgrades without blocking feature work:

name: ci-canary
on:
  push:
    branches: [canary]
jobs:
  build-test-canary:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx affected --target=build --parallel=3 --base=origin/main --head=HEAD
      - run: npx nx affected --target=test --parallel=3 --base=origin/main --head=HEAD
      - run: npx nx run web:e2e:smoke
      - run: npx lhci autorun --config=lighthouserc.json
      - run: npx reg-suit run # visual diffs
      - run: npx nx run web:deploy:canary

What we shipped while upgrading

When to Hire an Angular Developer for Legacy Rescue

How an Angular Consultant Approaches Signals Migration

Effect pattern we kept for telemetry (typed, optimistic, retry):

@Injectable()
export class TelemetryEffects {
  connect$ = createEffect(() => this.actions.pipe(
    ofType(connectTelemetry),
    switchMap(() => this.ws.connect<TelemetryEvent>('wss://...').pipe(
      map(e => telemetryReceived({ event: e })),
      retry({ delay: (e, i) => Math.min(1000 * 2 ** i, 15000) })
    ))
  ));
  constructor(private actions: Actions, private ws: TypedWebSocketService) {}
}

Lessons from the field: a global entertainment company, United, Charter

Case closed: outcomes and next instrumentation