Device Fleet Management in Angular 20+: Real‑Time Dashboards for Barcode Scanners and Printers with Signals, SignalStore, and Typed WebSockets

The situation

Operations had 20k+ devices—mix of Android scanners and industrial printers—across multiple regions. The legacy dashboard polled REST, dropped events during peaks, and froze the UI when a wave of job updates landed at once.

The symptoms

Supervisors saw stale device states, operators reprinted blindly, and support burned hours chasing phantom offline incidents. Hiring more devs wasn’t the fix; the pipeline and UI state model were wrong.

• Missed print failures during waves

• Janky grid on bursty updates

• Manual device resets increasing MTTR

Bursty telemetry and backpressure

Polling collapses under burst load. You need persistent connections with backpressure, batching, and a way to reconcile out‑of‑order events.

• Printers emit job state bursts; scanners heartbeat together at shift changes

Hardware reality: offline happens

UX must survive temporary partitions: queue jobs locally, show device intent vs. confirmed state, and recover without operator heroics.

• Dead zones, AP reboots, power cycles

Multi‑tenant + RBAC

Data must be scoped server‑side and client‑enforced. Operators should only see their aisle; regional admins see the whole map.

• Vendors, regions, and sites with different visibility rules

Device state model with SignalStore

We model devices as a finite state machine (Online/Offline/Updating/Error). Computed Signals drive status chips, filters, and counts without an Rx spaghetti bowl.

Typed event schema

Typed schemas stop silent failures. If payloads drift, TypeScript complains and telemetry flags the mismatch.

• Versioned union types

• Server emits envelopes with monotonically increasing sequence

UI that scales

Even at 50k rows, change detection stays predictable with Signals and tokenized styles for density and contrast.

• PrimeNG DataTable with virtual scroll

• Batch DOM updates via requestAnimationFrame

1) Types + SignalStore

// device.types.ts
export type DeviceStatus = 'online' | 'offline' | 'updating' | 'error';
export interface Device { id: string; site: string; type: 'scanner'|'printer'; status: DeviceStatus; battery?: number; lastSeen: number; firmware?: string; }

// event schema (versioned)
export interface BaseEvent { v: 1; ts: number; seq: number; deviceId: string; }
export interface HeartbeatEvent extends BaseEvent { kind: 'heartbeat'; battery: number; }
export interface JobEvent extends BaseEvent { kind: 'job'; jobId: string; state: 'queued'|'printing'|'done'|'failed'; }
export interface StatusEvent extends BaseEvent { kind: 'status'; status: DeviceStatus; }
export type FleetEvent = HeartbeatEvent | JobEvent | StatusEvent;

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

interface DevicesState {
  devices: Record<string, Device>;
  filter: { site?: string; type?: Device['type']; status?: DeviceStatus };
  seqCursor: number; // last processed seq
}

const initialState: DevicesState = { devices: {}, filter: {}, seqCursor: 0 };

export const DevicesStore = signalStore(
  { providedIn: 'root' },
  withState(initialState),
  withComputed(({ devices, filter }) => ({
    list: () => Object.values(devices()),
    filtered: () => Object.values(devices()).filter(d =>
      (!filter().site || d.site === filter().site) &&
      (!filter().type || d.type === filter().type) &&
      (!filter().status || d.status === filter().status)
    ),
    counts: () => {
      const acc = { online: 0, offline: 0, updating: 0, error: 0 } as Record<DeviceStatus, number>;
      for (const d of Object.values(devices())) acc[d.status]++;
      return acc;
    }
  })),
  withMethods((store) => ({
    applyEvent(evt: FleetEvent) {
      if (evt.seq <= store.seqCursor()) return; // idempotent
      store.seqCursor.set(evt.seq);
      const map = { ...store.devices() };
      const d = map[evt.deviceId] ?? { id: evt.deviceId, site: 'unknown', type: 'scanner', status: 'offline', lastSeen: 0 } as Device;
      d.lastSeen = evt.ts;
      if (evt.kind === 'heartbeat') d.battery = evt.battery;
      if (evt.kind === 'status') d.status = evt.status;
      map[evt.deviceId] = d;
      store.devices.set(map);
    },
    setFilter(filter: Partial<DevicesState['filter']>) { store.filter.set({ ...store.filter(), ...filter }); }
  }))
);

2) Typed WebSocket service with heartbeat and backoff

// fleet-socket.service.ts
import { Injectable, inject } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { EMPTY, retry, tap } from 'rxjs';
import { FleetEvent } from './device.types';
import { DevicesStore } from './devices.store';

@Injectable({ providedIn: 'root' })
export class FleetSocketService {
  private store = inject(DevicesStore);
  private socket?: WebSocketSubject<FleetEvent>;

  connect(token: string) {
    this.socket = webSocket<FleetEvent>({
      url: `wss://fleet.api.example.com/events?auth=${token}`,
      deserializer: e => JSON.parse(e.data) as FleetEvent
    });

    return this.socket.pipe(
      tap(evt => this.store.applyEvent(evt)),
      retry({ count: Infinity, delay: (_, i) => Math.min(1000 * 2 ** i, 15000) })
    ).subscribe({ error: () => {/* telemetry already captures */} });
  }

  ping() { this.socket?.next({ kind: 'heartbeat', v: 1, ts: Date.now(), seq: 0, deviceId: 'client' } as any); }
}

3) PrimeNG UI excerpt

<p-card *ngFor="let d of store.filtered()" class="device-card" [ngClass]="d.status">
  <ng-template pTemplate="header">{{ d.id }} • {{ d.type | titlecase }}</ng-template>
  <div class="row">
    <p-chip [label]="d.status" [class]="'status-' + d.status"></p-chip>
    <span>Battery: {{ d.battery ?? '—' }}%</span>
    <span>Last seen: {{ d.lastSeen | date:'shortTime' }}</span>
  </div>
</p-card>

Challenge

The previous Angular app (pre‑Signals) used ad‑hoc subjects and manual change detection triggers. Under peak pick/pack, print failures weren’t surfaced fast enough. MTTR ballooned and overnight reprints became normal.

• 20k+ devices across 5 regions

• Legacy polling missing bursts

• Operators blind during Wi‑Fi drops

Intervention

We moved to a typed event pipeline with strict schemas and sequence cursors to guarantee once‑only processing. UI updates were batched with Signals. Jobs were queued client‑side with conflict‑free merges when connectivity restored. RBAC limited view by site/role.

• Angular 20+, Signals + SignalStore

• Typed WebSockets with sequence cursors

• PrimeNG virtualized grid; density tokens

• Offline‑tolerant job queue + resume

Measurable results

We verified with Angular DevTools flame charts, GA4 custom events, and Firebase Logs for schema mismatches. Supervisors received live, trustworthy states; operators stopped guessing.

• −42% MTTR on device incidents

• +18% successful first‑pass print rate

• INP 220ms → 120ms on the fleet grid

• 99.98% event delivery to UI during peaks

Step 1: Align on contracts

We lock an event contract with backend/device teams. No contract, no dashboard. Breaking changes trigger feature flags and canaries.

• Typed event and command schemas

• Version/compat matrix across firmware

Step 2: Prove reliability fast

We validate reconnect behavior and idempotence early to avoid a fragile foundation that works only on perfect Wi‑Fi.

• Backoff + heartbeat

• Replay from seqCursor

• Chaos test for AP drops

Step 3: Design for operators

AA accessibility and measured UX (task time, error rate) beat “vibe‑coded” screens. PrimeNG + tokens keeps it consistent.

• Status chips and job intents

• Accessible keyboard flows

• Density controls by role

Step 4: Observe everything

When a device misbehaves at 2 a.m., we need breadcrumbs. We tag events by site/firmware and alert when latency breaches SLOs.

• OpenTelemetry traces

• Error taxonomy

• SLOs on event latency

Signals migration without a rewrite

If you’re stuck on Angular 9–14 or legacy patterns, I implement a strangler path to Signals + SignalStore so you can ship while modernizing.

• Adapter layer over NgRx/Subjects

• Facade refactor reduces blast radius

Stabilize chaotic codebases

I’ve rescued dashboards for a broadcast media network and a major airline. We tackle the riskiest modules first and ship behind flags. See how we can stabilize your Angular codebase with a short assessment.

• Zone.js hot spots

• Strict TypeScript + tests

Nx + preview environments

Every PR spins an environment with synthetic device streams so ops can sign off on real scenarios before merge.

• Storybook for device cards

• Firebase Hosting previews

Contracts in CI

We stub firmware adapters and run contract suites to catch drift early. GitHub Actions blocks merges on schema diffs.

• Schema tests vs. captured fixtures

• Contract tests for commands

Accessibility and UX budgets

We keep motion tasteful and fast. Accessibility checks run on CI; regressions fail the build.

• Lighthouse + INP budgets

• prefers-reduced-motion

What to instrument next

These metrics tell you if the dashboard is making the floor calmer.

• Event latency SLOs by site

• First-failure detection rate

• Operator task success

Talk to AngularUX

If you need a remote Angular developer with Fortune 100 experience to upgrade or stabilize a fleet dashboard, let’s talk. Real systems, real metrics, on budget.

• Codebase review in a week

• Discovery call in 48 hours