Angular 12–15 ➜ 20 Without State Surprises: Signals + SignalStore, RxJS 7 fixes, and change detection that won’t jitter

Common failure modes I actually see

On United’s kiosk work we learned the hard way: one “innocent” stream change can freeze a device. On dashboards at a leading telecom provider, careless shareReplay kept ghost sessions alive for hours. Angular 20 is fast—but only if we carry state and RxJS forward intentionally.

• Selectors refire unpredictably after refactors

• shareReplay memory leaks pin stale data

• toPromise removal breaks guards/resolvers

• Zone-tied side effects stop running under zoneless

• SSR hydration mismatches when initial state isn’t stable

Three-track upgrade strategy

Decouple the concerns so you can ship partial wins weekly. Each track has its own tests and feature flags to reduce blast radius.

• State: migrate selectors/facades to signals first

• Streams: RxJS 6→7 mechanical fixes + hardening

• Change detection: OnPush stability, optionally zoneless

Adopt signals at the edges

Signals are fantastic for view composition. Keep your NgRx reducers/effects intact initially. Migrate selectors/facades to signals so templates become deterministic without ripping out your state engine.

• selectSignal() for store slices

• toSignal() for service streams

• computed() to replace selector math

• effect() for imperative sync

Minimal facade example (NgRx ➜ Signals)

// users.facade.ts (Angular 20, NgRx 16+)
import { inject, Injectable, computed } from '@angular/core';
import { Store, selectSignal } from '@ngrx/store';
import { selectUsers, selectSelectedId } from './users.selectors';

@Injectable({ providedIn: 'root' })
export class UsersFacade {
  private store = inject(Store);
  users = selectSignal(this.store, selectUsers);
  selectedId = selectSignal(this.store, selectSelectedId);
  selectedUser = computed(() => this.users().find(u => u.id === this.selectedId()));
  select(id: string) { this.store.dispatch({ type: '[Users] Select', id }); }
}

Why SignalStore

For read-mostly dashboards (Charter ads, an insurance technology company telematics), SignalStore reduces boilerplate without sacrificing testability. I start with low-risk slices like filters or view preferences.

• Colocation of state + computed + mutations

• Ergonomic memoization via computed()

• No runtime selector graph to debug

SignalStore example

// filters.store.ts (@ngrx/signals)
import { signalStore, withState, withComputed, withMethods } from '@ngrx/signals';

export interface FiltersState { query: string; tags: string[]; }

export const FiltersStore = signalStore(
  withState<FiltersState>({ query: '', tags: [] }),
  withComputed(({ query, tags }) => ({
    isActive: () => !!query() || tags().length > 0,
  })),
  withMethods((store) => ({
    setQuery(q: string) { store.query.set(q); },
    toggleTag(t: string) {
      const next = new Set(store.tags());
      next.has(t) ? next.delete(t) : next.add(t);
      store.tags.set([...next]);
    }
  }))
);

Bridge period with NgRx effects

You can keep NgRx for async orchestration and gradually fold slices into SignalStore. This hybrid is boring—and boring is safe in production.

• Keep effects for server I/O and WebSockets

• Expose derived state as signals to components

Fix toPromise, prefer firstValueFrom/lastValueFrom

// guards/resolvers
import { firstValueFrom } from 'rxjs';
const user = await firstValueFrom(this.api.getUser(id));

Harden shareReplay to avoid leaks and stale caches

import { shareReplay } from 'rxjs/operators';

this.live$ = this.socket.stream('orders').pipe(
  // ensures teardown when no subscribers
  shareReplay({ bufferSize: 1, refCount: true })
);

• Always specify bufferSize and refCount

• Prefer refCount: true for live data

Multicasting & connectable changes

import { share } from 'rxjs/operators';
const updates$ = this.source$.pipe(share({ resetOnRefCountZero: true }));

• Use share or connect operators from rxjs

Typed catchError and rethrow

import { catchError, throwError } from 'rxjs';

load$ = this.http.get<User>('/api/user').pipe(
  catchError(err => {
    this.logger.error('load failed', err);
    return throwError(() => err);
  })
);

• Return typed Observable, don’t swallow errors

Stabilize OnPush with signals first

import { Component, input, computed } from '@angular/core';

@Component({ selector: 'user-card', templateUrl: './user-card.html' })
export class UserCardComponent {
  user = input.required<User>();
  initials = computed(() => this.user().name.split(' ').map(s => s[0]).join(''));
}

• Prefer signal inputs with input()

• Replace async pipe churn with signals where hot

Gate zoneless change detection behind a flag

// main.ts
import { bootstrapApplication, provideZoneChangeDetection } from '@angular/platform-browser';
import { provideZonelessChangeDetection } from '@angular/core'; // use the stable/experimental export available in your version

const zoneless = (window as any).__featureFlags?.zoneless === true;

bootstrapApplication(AppComponent, {
  providers: [
    zoneless ? provideZonelessChangeDetection() : provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true })
  ]
});

Roll out to 1–5% of traffic via Firebase Remote Config; watch Angular DevTools flame charts for unexpected rerenders and GA4 for CLS shifts.

• Flip per-app, not per-component

• Audit third-party libs (PrimeNG/Material)

SSR hydration sanity

If you SSR, make sure any toSignal() adapters have a deterministic initial value to avoid mismatched hydration.

• Ensure stable initial values

• Avoid side effects in constructors

Typed event schema + backoff retry

import { webSocket } from 'rxjs/webSocket';
import { map, retryWhen, scan, delay } from 'rxjs/operators';

interface OrderEvent { id: string; status: 'new'|'filled'|'error'; ts: number; }

const socket$ = webSocket<OrderEvent>({ url: 'wss://events' });

const events$ = socket$.pipe(
  map(e => ({ ...e, ts: e.ts ?? Date.now() })),
  retryWhen(errors => errors.pipe(
    scan((acc) => Math.min(acc * 2, 16000), 1000),
    delay(v => v + Math.random() * 250)
  ))
);

• Exponential retry with jitter

• Validate payload shape before state write

Bridge to signals at the component boundary

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

orders = toSignal(events$, { initialValue: [] as OrderEvent[] });

// template: <orders-table [rows]="orders()"></orders-table>

Nx + ESLint + Cypress minimal setup

# nx-cloud + GitHub Actions (excerpt)
name: ci
on: [pull_request]
jobs:
  verify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm i --frozen-lockfile
      - run: pnpm nx affected -t lint,test,build --parallel=3
      - run: pnpm nx e2e app-e2e --configuration=ci

• affected:test on every PR

• ESLint rules for rxjs/angular

• E2E happy-path + hydration smoke

Telemetry you should watch

In IntegrityLens (12k+ interviews), we shipped upgrades behind feature flags and watched error budgets. In gitPlumbers (99.98% uptime), we block merges if RxJS lint errors or SSR hydration mismatches appear.

• Angular DevTools flame charts

• Core Web Vitals (CLS, INP)

• GA4/Firebase Logs for error rates

Signals you need help now

If this feels familiar, bring in an Angular consultant who’s done it at enterprise scale. I’ll audit your state, streams, and change detection in a week and give you a flagged rollout plan that engineering and product can both trust.

• Repeated regressions after each update

• WebSocket disconnect storms under load

• Zone-related race conditions in prod

• Developers avoiding certain files/components

What you’ll get in 2–4 weeks

On past rescues we restored stability, cut dashboard re-renders by 30–45%, and unblocked upgrades without freezing delivery.

• RxJS 7 fixed and linted

• Selectors shifted to signals

• One SignalStore slice in prod

• Zoneless evaluated behind feature flag

• Telemetry and rollback guardrails

What to instrument next

Once the backbone is stable, we extend measurement so regressions get caught before users ever see them.

• Feature-flagged SSR hydration checks

• PrimeNG/Material visual regression tests

• OpenTelemetry traces across effects