Docker Hardware Simulation for Angular 20+: Kiosk, Scanner, and Printer Emulators That Make CI Fast and Defects Reproducible

The scene

I’ve built airport kiosk software where printers, scanners, and network conditions all misbehaved at once. In the lab everything looked fine; in the field, a reconnection during the print pipeline froze the UI. We couldn’t ship a fix without reproducing it. The answer wasn’t “more mocks”—it was Dockerized peripherals wired into CI so we could deterministically replay the bug.

• Real kiosks intermittently failed to print boarding passes offline.

• Repro required a specific timing of scan → lookup → print while reconnecting Wi‑Fi.

The problem with direct device bindings

Binding directly to device APIs in the app causes environment drift. In CI there is no HID. In production, drivers buffer unexpectedly. You need a stable boundary.

• OS/HID differences between dev, CI, and field make defects non-deterministic.

• Mocking hides timing, buffering, and reconnection race conditions.

The device-broker boundary

By moving hardware concerns into a broker, we can simulate, record, and replay. Angular consumes typed events and maintains state with Signals + SignalStore.

• Angular talks to a broker via WebSocket/REST, not the device.

• Broker orchestrates printers/scanners and exposes test hooks.

Measurable outcomes

When your CI spins the same Docker sims your devs use, you stop chasing ghosts.

• 10x faster defect reproduction in my airline kiosk project.

• 40–60% fewer flaky tests across device flows.

• MTTR down from days to hours on field issues.

Typed device events

Start with event schemas your Angular app consumes. They’re the contract between UI and hardware.

Docker Compose for sims + broker

Keep sims as separate images so CI can boot them headlessly. The broker coordinates them and provides a single URL to Angular.

Node.js broker with WebSocket + REST

The broker streams live events (scans, printer status) and exposes REST endpoints for tests to trigger actions (e.g., “print this payload” or “emit a scan packet”).

Angular 20 integration with Signals + SignalStore

Use Signals for live device state and a SignalStore for connection, last event, and error handling.

Cypress + CI recipes

Cypress drives full kiosk flows by posting events to the broker, the same way the physical device would. CI spins the stack and runs the same tests.

1) Device event schemas (TypeScript)

// packages/shared/src/device-events.ts
export type DeviceEvent =
  | { type: 'scanner.scan'; ts: number; payload: { symbology: 'qr'|'code128'; data: string } }
  | { type: 'printer.status'; ts: number; payload: { ready: boolean; paper: 'ok'|'low'|'out'; jobId?: string } }
  | { type: 'printer.job.complete'; ts: number; payload: { jobId: string; success: boolean } };

export interface PrintJobRequest {
  template: 'boarding-pass' | 'receipt';
  data: Record<string, unknown>;
}

2) Docker Compose for sims + broker

# compose.yml
services:
  device-broker:
    build: ./broker
    ports: ["8080:8080"]
    environment:
      - PRINTER_URL=http://printer-sim:9000
      - SCANNER_URL=http://scanner-sim:9100
    depends_on: [printer-sim, scanner-sim]

  printer-sim:
    build: ./sims/printer
    expose: ["9000"]

  scanner-sim:
    build: ./sims/scanner
    expose: ["9100"]

3) Minimal broker (Node.js + ws + express)

// broker/src/index.ts
import express from 'express';
import { WebSocketServer } from 'ws';
import fetch from 'node-fetch';
import type { DeviceEvent, PrintJobRequest } from '@shared/device-events';

const app = express();
app.use(express.json());
const server = app.listen(8080, () => console.log('broker:8080'));
const wss = new WebSocketServer({ server });
const clients = new Set<WebSocket>();

wss.on('connection', (ws) => { clients.add(ws); ws.on('close', () => clients.delete(ws)); });

function broadcast(evt: DeviceEvent) {
  for (const ws of clients) ws.send(JSON.stringify(evt));
}

// Test hook: simulate a scan
app.post('/test/emit-scan', async (req, res) => {
  const evt: DeviceEvent = { type: 'scanner.scan', ts: Date.now(), payload: req.body };
  broadcast(evt); res.json({ ok: true });
});

// Print job proxy to printer-sim
app.post('/print', async (req, res) => {
  const job: PrintJobRequest = req.body;
  const r = await fetch(process.env.PRINTER_URL + '/print', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(job) });
  const result = await r.json();
  broadcast({ type: 'printer.status', ts: Date.now(), payload: { ready: true, paper: 'ok', jobId: result.jobId } });
  res.json(result);
});

4) Angular Signals + SignalStore for device state

// app/stores/device.store.ts
import { signalStore, withState, withMethods } from '@ngrx/signals';
import { Injectable, effect, Signal } from '@angular/core';

interface DeviceState {
  connected: boolean;
  lastEvent?: unknown;
  printerReady: boolean;
  paper: 'ok'|'low'|'out';
}

@Injectable({ providedIn: 'root' })
export class DeviceStore extends signalStore(
  { providedIn: 'root' },
  withState<DeviceState>({ connected: false, printerReady: false, paper: 'ok' }),
  withMethods((store) => ({
    connect(url: string) {
      const ws = new WebSocket(url);
      ws.onopen = () => store.patchState({ connected: true });
      ws.onclose = () => store.patchState({ connected: false });
      ws.onmessage = (m) => {
        const evt = JSON.parse(m.data);
        if (evt.type === 'printer.status') store.patchState({ printerReady: evt.payload.ready, paper: evt.payload.paper, lastEvent: evt });
        else store.patchState({ lastEvent: evt });
      };
    },
  }))
) {}

5) Cypress test triggering a scan

// cypress/e2e/kiosk.cy.ts
it('prints after a scan', () => {
  cy.visit('/kiosk');
  // emit a scan via broker test hook
  cy.request('POST', `${Cypress.env('BROKER_URL')}/test/emit-scan`, { symbology: 'qr', data: 'ABC123' });
  cy.contains('Passenger ABC123').should('be.visible');
  cy.contains('Print Boarding Pass').click();
  cy.contains('Print job sent').should('be.visible');
});

6) GitHub Actions: spin sims and run E2E

name: e2e
on: [push, pull_request]
jobs:
  run-e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - name: Boot device sims
        run: docker compose -f compose.yml up -d --build
      - name: Build Angular
        run: npm run build
      - name: Run Cypress against broker
        env:
          BROKER_URL: http://localhost:8080
        run: npx cypress run --config baseUrl=http://localhost:4200

Metrics that mattered

On the airline kiosk project, we found the freeze was a race between scan → API lookup → print while Wi‑Fi flapped. By scripting the reconnection window in the broker and delaying print ACKs in the printer-sim, we reproduced it instantly and shipped a fix. Similar patterns helped a global entertainment employee-tracking system and an insurance telematics dashboard mock OBD‑II events.

• Defect reproduction time: ~2 days → ~2 hours.

• Flaky device E2E tests: down ~50% in 2 sprints.

• Stability: broker + sims run reliably across GitHub Actions and Jenkins.

Tooling notes

We used PrimeNG for quick status panels, published typed events as GA4 custom events for correlation, and attached broker logs to CI artifacts so QA could download the exact failing run.

• Nx monorepo, Angular 20, Cypress 13, PrimeNG for admin UIs.

• Brokers in Node.js; backends in .NET and Node; Dockerized sims.

• Telemetry to Firebase Logs + GA4 for drill-down on device events.

Signals you should call for help

If this sounds familiar, bring in an Angular consultant who has delivered kiosk and device-heavy apps. I can stand up a broker + sims in a week, wire Signals/SignalStore, and hand you a CI recipe that sticks.

• Device-related bugs take >1 day to reproduce.

• CI has no parity with field environments.

• Manual testing blocks releases or nightlies.

Engagement pattern

Typical rescue or enablement runs 2–4 weeks. If you need to stabilize a chaotic codebase first, I use the same approach we run at gitPlumbers to rescue vibe-coded apps and restore confidence quickly.

• Discovery and architecture in 2–3 days.

• PoC sims + broker + one E2E path in 1 week.

• CI rollout and team handoff in week 2.

What to instrument next

Once the pipeline is stable, expand coverage: multiple printers, throttling scans, and offline-first flows. Track Core Web Vitals and error budgets alongside device KPIs for a full picture.

• Add health checks and exponential retry to broker connections.

• Record/replay device event traces in CI to catch regressions.

• Expose feature flags so QA can toggle error cases (paper out, jammed).