Upgrade Angular 12–15 to Angular 20 Without Breakage: State Management, RxJS, and Change Detection

Scene from the front lines: why your 12–15 dashboard jitters on ng20

Why this migration matters for 20+

Step-by-step: 12–15 to 20 without pausing delivery

# 1) Create a safe branch
git checkout -b feat/upgrade-ng20

# 2) Framework + tooling (Nx-aware)
npx nx migrate @angular/cli@20 @angular/core@20
npx nx migrate @ngrx/store@latest @ngrx/effects@latest @ngrx/entity@latest
pnpm install
npx nx migrate --run-migrations

# 3) Lock CI toolchain (example GitHub Actions)

# .github/workflows/ci.yml (snippet)
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [20]
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: ${{ matrix.node }}, cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm nx run-many -t build,test,lint -c ci

State management: breaking changes and a safe path with Signals

// user.selectors.ts (legacy stays intact)
export const selectUsers = createSelector(selectUserState, s => s.list);
export const selectActiveTeamId = createSelector(selectTeamState, s => s.activeId);

// users.component.ts (Angular 20)
import { toSignal, computed, effect, signal, input } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectUsers, selectActiveTeamId } from '../state';

@Component({
  selector: 'ux-users',
  templateUrl: './users.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true
})
export class UsersComponent {
  // reactive input using signals
  filters = input<{ q?: string }>();

  private users$ = this.store.select(selectUsers);
  private teamId$ = this.store.select(selectActiveTeamId);

  users = toSignal(this.users$, { initialValue: [] });
  teamId = toSignal(this.teamId$, { initialValue: null });

  // derived state as computed
  visible = computed(() => {
    const q = this.filters()?.q?.toLowerCase() ?? '';
    return this.users().filter(u => u.teamId === this.teamId() && u.name.toLowerCase().includes(q));
  });

  constructor(private store: Store) {
    // optional side-effect for analytics
    effect(() => {
      track('users_visible_count', { count: this.visible().length }); // GA4/Firebase
    });
  }
}

// users.store.ts (NgRx SignalStore composing server + selection)
import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';

interface UsersState {
  list: User[];
  loading: boolean;
}

const initialState: UsersState = { list: [], loading: false };

export const UsersStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withComputed(({ list }) => ({
    total: computed(() => list().length),
  })),
  withMethods((store) => ({
    setLoading(loading: boolean) { patchState(store, { loading }); },
    setUsers(list: User[]) { patchState(store, { list }); }
  }))
);

// Feature components can consume UsersStore signals alongside legacy NgRx selectors.

RxJS migration landmines to fix in CI

// BEFORE (old signatures & stale cache risk)
const data$ = http.get<Item[]>(url).pipe(
  switchMap(items => combineLatest(items.map(i => loadDetails$(i.id, (a, b) => ({ a, b }))))), // resultSelector misuse
  shareReplay(1) // no refCount, stays subscribed forever
);

// AFTER
const data$ = http.get<Item[]>(url).pipe(
  switchMap(items => combineLatest(items.map(i => loadDetails$(i.id)))),
  map(detailsArr => detailsArr.map(d => ({ a: d.a, b: d.b }))),
  shareReplay({ bufferSize: 1, refCount: true })
);

// toPromise removal
async function loadOnce() {
  const v = await firstValueFrom(data$);
  return v;
}

Change detection: cut renders with Signals and OnPush

<!-- BEFORE -->
<div *ngFor="let u of users$ | async">{{ u.name }}</div>

<!-- AFTER: bridge once, compute locally -->
<div *ngFor="let u of visible()">{{ u.name }}</div>

// App shell: ensure OnPush everywhere and avoid manual detectChanges
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  selector: 'app-shell',
  template: `<router-outlet />`
})
export class AppShell {}

When to Hire an Angular Developer for Legacy Rescue

End-to-end example: upgrading a dashboard slice

// charts/traffic-card.component.ts
@Component({
  selector: 'ux-traffic-card',
  standalone: true,
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <ux-chart [data]="series()" [loading]="loading()"></ux-chart>
  `
})
export class TrafficCardComponent {
  private traffic$ = this.store.select(selectTrafficByRegion);
  private loading$ = this.store.select(selectTrafficLoading);

  traffic = toSignal(this.traffic$, { initialValue: [] });
  loading = toSignal(this.loading$, { initialValue: false });

  series = computed(() => transformToHighcharts(this.traffic()));
  constructor(private store: Store) {}
}

What to instrument next to prove the upgrade

FAQs for upgrades and engagements