Angular 12–15 to 20 Without Surprises: Signals, RxJS 7.8+, and Change Detection Pitfalls (and Fixes)

The dashboard that shakes when you click filters

Upgrades fail at the edges—state transitions during streaming, shared RxJS caches, and components doing too much work per tick. Angular 20 doesn’t require heroics, it requires discipline.

Why Angular 12–15 apps break during upgrades

This is where a senior Angular consultant earns their keep: sequencing the work so each risk is isolated and measured.

Implementation checklist: upgrade to Angular 20 without breaking state

# framework + tooling
nvm use 20
ng update @angular/core@20 @angular/cli@20
ng update rxjs@^7.8
ng update @ngrx/store @ngrx/effects @ngrx/entity @ngrx/router-store

# lint + tests keep you honest
ng add @angular-eslint/schematics
nx affected:test --all
nx affected:lint --all

Key notes:

• Typescript 5+; strict true recommended.
• Fix builder changes if you’re still on webpack-only builders; Nx v18+ + Vite work well.
• PrimeNG upgrade? Align with Angular 20; validate tokens and breaking CSS utilities in Storybook/Chromatic.

Fix RxJS breakages before you touch state

// BEFORE (Angular 13)
const cached$ = this.http.get<Item[]>('/api/items').pipe(
  shareReplay(1)
);

const result = await this.http.get('/api/do').toPromise();

// AFTER (Angular 20 / RxJS 7.8)
const cached$ = this.http.get<Item[]>('/api/items').pipe(
  shareReplay({ bufferSize: 1, refCount: true })
);

const result = await firstValueFrom(this.http.get('/api/do'));

// throwError factory + tap observer
pipe(
  catchError((e) => throwError(() => e)),
  tap({ next: v => log(v), error: e => track(e) })
)

Also ensure WebSocket subjects are closed on destroy and reconnected with exponential backoff (retryWhen) to avoid zombie streams on route changes.

Migrate state safely: NgRx to Signals without a rewrite

// selector -> signal adapter (Angular 20)
import { toSignal } from '@angular/core/rxjs-interop';

readonly orders = toSignal(this.store.select(selectOrders), { initialValue: [] });
readonly user   = toSignal(this.store.select(selectUser));

// template (no async pipe needed)
// <div>Total: {{ orders().length }}</div>

// Local state via SignalStore (NgRx Signals Store)
import { signalStore, withState, withComputed, withMethods } from '@ngrx/signals';

interface FilterState { query: string; sort: 'asc'|'desc'; }

export const FilterStore = signalStore(
  withState<FilterState>({ query: '', sort: 'asc' }),
  withComputed(({ query }) => ({
    debouncedQuery: computed(() => query().trim().toLowerCase())
  })),
  withMethods((store) => ({
    setQuery(q: string) { store.query.set(q); },
    toggleSort() { store.sort.update(s => s === 'asc' ? 'desc' : 'asc'); }
  }))
);

Keep NgRx Effects for cross-cutting concerns (auth, workspace, multi-tenant routing). Use SignalStore for page/local orchestration and derived UI state. This hybrid model is predictable and easy to review in PRs.

Change detection: keep OnPush, trial zoneless later

// opt-in zoneless behind a flag (as of v20, experimental)
import { isDevMode, inject } from '@angular/core';
import { provideExperimentalZonelessChangeDetection } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    ...(featureFlags.zoneless ? [provideExperimentalZonelessChangeDetection()] : [])
  ]
};

<!-- Prefer signals/computed over heavy pipes -->
<div *ngFor="let o of filteredOrders(); trackBy: trackId">{{ o.total | currency }}</div>

Use watch() or effect() for imperative interop; keep side effects out of templates. Measure with Angular DevTools and GA4/Firebase Performance traces.

Worked example: from NgRx + async pipe to Signals + Store

// BEFORE: container component
orders$ = this.store.select(selectOrders);
loading$ = this.store.select(selectLoading);

ngOnInit() {
  this.sub = this.route.params.pipe(
    switchMap(({ id }) => this.service.connect(id)), // websocket
  ).subscribe();
}

ngOnDestroy() { this.sub?.unsubscribe(); }

<!-- BEFORE -->
<button (click)="refresh()" [disabled]="(loading$ | async) ?? false">Refresh</button>
<div *ngFor="let o of (orders$ | async); trackBy: trackId">{{o.id}}</div>

// AFTER: Signals + interop
import { toSignal } from '@angular/core/rxjs-interop';
import { effect } from '@angular/core';

orders = toSignal(this.store.select(selectOrders), { initialValue: [] });
loading = toSignal(this.store.select(selectLoading), { initialValue: false });

constructor(private service: WsService, private route: ActivatedRoute) {
  effect(() => {
    const id = this.route.snapshot.params['id'];
    this.service.connect(id); // service manages reconnect/backoff
  });
}

refresh() { this.store.dispatch(loadOrders()); }

<!-- AFTER -->
<button (click)="refresh()" [disabled]="loading()">Refresh</button>
<div *ngFor="let o of orders(); trackBy: trackId">{{ o.id }}</div>

We moved subscription management out of the template, removed extra CD passes, and made the route→stream link explicit with an effect(). In production, I add exponential backoff and typed event schemas for WebSocket payloads.

When to Hire an Angular Developer for Legacy Rescue

See how I stabilize chaotic codebases at gitPlumbers—our modernization system drove a verified 70% velocity boost while maintaining 99.98% uptime.

How an Angular Consultant Approaches Signals Migration

# excerpt: .github/workflows/ci.yml
- name: Build & Test
  run: |
    nx run-many -t lint,test,build --all
    npx lighthouse-ci https://preview-url --budgets-path=./budgets.json
    nx e2e app-e2e --configuration=ci

Measurable outcomes and what to instrument next

Once stable, explore SSR or partial hydration, and expand Signals to replace brittle component subscriptions. If you’re on PrimeNG, lock tokens and accessibility checks (AA) in CI for confidence.