Dockerized Hardware Simulation for Angular 20+: Kiosks, Scanners, and Printers in Dev/CI to Reproduce Defects Fast

The 5 a.m. kiosk bug—and why we Dockerized devices

Why Docker hardware simulation accelerates Angular delivery

Reference architecture: Dockerized device emulators for Angular 20+

docker-compose.yml
version: '3.9'
services:
  device-hub:
    build: ./emulators/device-hub
    environment:
      - WS_PORT=8081
      - HTTP_PORT=8080
    ports:
      - "8080:8080"
      - "8081:8081"
    healthcheck:
      test: ["CMD", "curl", "-f", "http://device-hub:8080/health"]
      interval: 5s
      timeout: 2s
      retries: 20
  printer-sim:
    build: ./emulators/printer-sim
    environment:
      - PRINTER_MODEL=escpos
      - FAILURE_MODE=none # none|paper_out|jam|overheat
    volumes:
      - ./fixtures/receipts:/app/receipts
  scanner-sim:
    build: ./emulators/scanner-sim
    environment:
      - BARCODE_STREAM=./fixtures/barcodes.json
    volumes:
      - ./fixtures:/app/fixtures
  cardreader-sim:
    build: ./emulators/cardreader-sim
    environment:
      - CARD_PROFILE=visa
  record-replay:
    build: ./tools/record-replay
    volumes:
      - ./scenarios:/app/scenarios
    ports:
      - "9090:9090"
networks:
  default:
    name: devices

Model device state with Angular Signals + SignalStore

// device-events.ts
export type DeviceEvent =
  | { type: 'printer.status'; online: boolean; paperPct: number }
  | { type: 'printer.error'; code: 'paper_out' | 'jam' | 'overheat'; message: string }
  | { type: 'scanner.scan'; text: string; symbology: 'qr' | 'code128' | 'pdf417' }
  | { type: 'cardreader.result'; status: 'approved' | 'declined'; authCode?: string }
  | { type: 'hub.heartbeat'; ts: number };

export interface DeviceState {
  printerOnline: boolean;
  paperPct: number;
  lastPrinterError?: string;
  scannerConnected: boolean;
  lastScan?: { text: string; symbology: string };
  payment?: { status: 'approved' | 'declined' };
  kioskMode: 'online' | 'offline' | 'degraded';
}

export const initialDeviceState: DeviceState = {
  printerOnline: false,
  paperPct: 100,
  scannerConnected: true,
  kioskMode: 'offline', // deterministic initial value
};

// device.store.ts (NgRx SignalStore)
import { signalStore, withMethods, withState } from '@ngrx/signals';
import { effect } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { retry, tap } from 'rxjs/operators';
import { DeviceEvent, initialDeviceState } from './device-events';

export const DeviceStore = signalStore(
  withState(initialDeviceState),
  withMethods((store) => {
    let socket: WebSocketSubject<DeviceEvent> | null = null;
    function connect(url = 'ws://localhost:8081/ws') {
      socket = webSocket<DeviceEvent>({ url });
      socket
        .pipe(
          retry({
            delay: (err, count) => Math.min(1000 * 2 ** count, 15000), // exponential backoff
          }),
          tap((msg) => dispatch(msg))
        )
        .subscribe();
    }
    function dispatch(msg: DeviceEvent) {
      switch (msg.type) {
        case 'printer.status':
          store.patchState({ printerOnline: msg.online, paperPct: msg.paperPct, kioskMode: 'online' });
          break;
        case 'printer.error':
          store.patchState({ lastPrinterError: msg.code, kioskMode: 'degraded' });
          break;
        case 'scanner.scan':
          store.patchState({ lastScan: { text: msg.text, symbology: msg.symbology } });
          break;
        case 'cardreader.result':
          store.patchState({ payment: { status: msg.status } });
          break;
        case 'hub.heartbeat':
          if (!store.kioskMode() || store.kioskMode() === 'offline') {
            store.patchState({ kioskMode: 'online' });
          }
          break;
      }
    }
    effect(() => {
      // reconnect on mode change if we drop offline
      if (store.kioskMode() === 'offline') connect();
    });
    return { connect };
  })
);

<!-- device-banner.component.html -->
<p-toast *ngIf="deviceStore.lastPrinterError()" severity="warn" summary="Printer" [detail]="deviceStore.lastPrinterError()"></p-toast>
<p-tag [severity]="deviceStore.kioskMode() === 'online' ? 'success' : 'warning'">
  {{ deviceStore.kioskMode() | titlecase }}
</p-tag>

CI integration: GitHub Actions, Jenkins, Azure DevOps

# .github/workflows/e2e.yml
name: e2e-devices
on: [push, pull_request]
jobs:
  e2e:
    runs-on: ubuntu-latest
    services:
      device-hub:
        image: ghcr.io/yourorg/device-hub:latest
        ports: ["8080:8080", "8081:8081"]
        options: >-
          --health-cmd="curl -f http://localhost:8080/health || exit 1" 
          --health-interval=5s --health-timeout=2s --health-retries=20
      printer:
        image: ghcr.io/yourorg/printer-sim:latest
      scanner:
        image: ghcr.io/yourorg/scanner-sim:latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - run: npx nx run webapp:e2e --configuration=ci
      - name: Upload emulator logs
        uses: actions/upload-artifact@v4
        with:
          name: emulator-logs
          path: emulators/**/logs/*.log

Record and replay failure scenarios

# record a scenario for printer paper-out
curl -X POST http://localhost:9090/record/start -d '{"name":"paper_out_checkout"}'
# trigger actions in the app, then stop
curl -X POST http://localhost:9090/record/stop
# replay in CI
curl -X POST http://localhost:9090/replay -d '{"name":"paper_out_checkout"}'

// cypress/e2e/paper-out.cy.ts
describe('Paper out flow', () => {
  it('shows recovery guidance and prevents duplicate charges', () => {
    cy.request('POST', 'http://localhost:9090/replay', { name: 'paper_out_checkout' });
    cy.visit('/checkout');
    cy.contains('Printer out of paper').should('be.visible');
    cy.contains('Retry Print').should('be.disabled'); // until paper restored
  });
});

Security and compliance in simulated environments

When to Hire an Angular Developer for Legacy Rescue

Metrics that keep you honest