From Vibe‑Coded Chaos to Measurable Calm: Rescuing a Legacy Angular Dashboard with Signals, SignalStore, and Nx (Angular 20+)

The Jittering Dashboard I Inherited: What Went Wrong

Diagnostic Pass: 5-Day Assessment with Telemetry and Flame Charts

Intervention: From Chaos to Calm—Signals, SignalStore, Nx, and Guardrails

import { inject, Injectable, computed, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { signalStore, withState, withComputed, withMethods } from '@ngrx/signals';
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { debounceTime, distinctUntilChanged, switchMap, retry, timer, map, catchError, of } from 'rxjs';

export interface DashboardState {
  tenantId: string | null;
  filters: { q: string; range: { from: string; to: string } };
  loading: boolean;
  results: ReadonlyArray<{ id: string; value: number }>;
  error: string | null;
}

const initialState: DashboardState = {
  tenantId: null,
  filters: { q: '', range: { from: '', to: '' } },
  loading: false,
  results: [],
  error: null,
};

export const DashboardStore = signalStore(
  withState(initialState),
  withComputed((store) => ({
    hasTenant: computed(() => !!store.tenantId()),
    total: computed(() => store.results().reduce((s, r) => s + r.value, 0)),
  })),
  withMethods((store, http = inject(HttpClient)) => ({
    setTenant(tenantId: string) { store.tenantId.set(tenantId); },
    setQuery(q: string) { store.filters.update(f => ({ ...f, q })); },

    load: rxMethod<void>(({ pipe }) =>
      pipe(
        debounceTime(150),
        distinctUntilChanged(),
        switchMap(() => {
          const tenant = store.tenantId();
          if (!tenant) return of([]);
          store.loading.set(true);
          return http.get<ReadonlyArray<{ id: string; value: number }>>(
            `/api/tenants/${tenant}/results`,
            { params: { q: store.filters().q } as any }
          ).pipe(
            retry({ count: 3, delay: (_, i) => timer(2 ** i * 250) }),
            map(data => { store.results.set(data); store.error.set(null); return data; }),
            catchError(err => { store.error.set('Load failed'); return of([]); })
          );
        })
      )
    ),
  }))
);

<!-- PrimeNG virtualized table driven by signals -->
<p-table
  [value]="DashboardStore.results()"
  [virtualScroll]="true"
  [virtualRowHeight]="44"
  [rows]="50"
  [trackBy]="trackById"
  [scrollHeight]="'60vh'">
  <ng-template pTemplate="header">
    <tr><th>ID</th><th>Value</th></tr>
  </ng-template>
  <ng-template pTemplate="body" let-row>
    <tr><td>{{ row.id }}</td><td>{{ row.value }}</td></tr>
  </ng-template>
</p-table>

Change Detection Hot Paths and UI Performance

API Reliability: Typed Schemas and Backoff

// typed client with validation + circuit breaker signal
import { z } from 'zod';
const ResultSchema = z.object({ id: z.string(), value: z.number() });
const ResultsSchema = z.array(ResultSchema);

export class ApiClient {
  #http = inject(HttpClient);
  circuitOpen = signal(false);
  async getResults(tenant: string, q: string) {
    try {
      const data = await this.#http
        .get(`/api/tenants/${tenant}/results`, { params: { q } })
        .pipe(retry({ count: 3, delay: (_, i) => timer(2 ** i * 250) }))
        .toPromise();
      const parsed = ResultsSchema.parse(data);
      return parsed;
    } catch (e) {
      this.circuitOpen.set(true);
      return [];
    }
  }
}

Before/After: Metrics That Moved

How an Angular Consultant Stabilizes Chaos Without Freezing Delivery

name: quality
on: [push, pull_request]
jobs:
  verify:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - run: pnpm install --frozen-lockfile
      - run: pnpm nx affected -t lint test build --parallel=3
      - run: pnpm nx run web:lhci || exit 1 # INP/LCP budgets

When to Hire an Angular Developer for Legacy Rescue

What We’d Instrument Next: Observability and UX Metrics

Closing Takeaways and Next Steps