Dockerized Device Sims for Angular 20+: Kiosks, Scanners, and Printers You Can Reproduce in CI

The 2am kiosk bug—and how Docker ended it

As companies plan 2025 Angular roadmaps, hardware integration is creeping into more dashboards: kiosks, POS, telematics. If you want to hire an Angular developer who can make this predictable, keep reading.

Why Dockerized peripherals matter for Angular 20+ teams

Dockerizing hardware simulation for Angular kiosks and peripherals

# docker-compose.yml
version: '3.9'
services:
  card-reader-sim:
    build: ./sims/card-reader
    environment:
      SCENARIO: ${SCENARIO:-double_swipe}
      SEED: ${SEED:-42}
    ports: ["7071:7071"]
    networks: [kiosk]
  barcode-sim:
    build: ./sims/barcode
    environment:
      SCENARIO: ${SCENARIO:-scan_ok}
    ports: ["7072:7072"]
    networks: [kiosk]
  printer-sim:
    image: olbat/cupsd:latest
    ports: ["631:631"]
    volumes:
      - ./sims/printer/spool:/var/spool/cups
    environment:
      PRINTER_NAME: KIOSK_PRN
    networks: [kiosk]
  firebase-emulators:
    image: ghcr.io/firebase/firebase-emulator:latest
    ports: ["4000:4000","9099:9099","8080:8080"]
    networks: [kiosk]
networks:
  kiosk:
    driver: bridge

Node simulator: typed events and ESC/POS printer sink

// sims/card-reader/src/server.ts
import { WebSocketServer } from 'ws';

// Typed event schema (keep versioned)
type DeviceEvent =
  | { type: 'device/connected'; ts: number }
  | { type: 'card/swipe'; ts: number; panLast4: string; token: string }
  | { type: 'device/error'; ts: number; code: 'TIMEOUT'|'JAM'|'CABLE_FLAP'; detail?: string };

const wss = new WebSocketServer({ port: 7071 });
const scenario = process.env.SCENARIO ?? 'double_swipe';

wss.on('connection', (ws) => {
  const now = Date.now();
  ws.send(JSON.stringify({ type: 'device/connected', ts: now } as DeviceEvent));

  if (scenario === 'double_swipe') {
    setTimeout(() => ws.send(JSON.stringify({
      type: 'card/swipe', ts: Date.now(), panLast4: '4242', token: 'tok_abc'
    } as DeviceEvent)), 200);
    setTimeout(() => ws.send(JSON.stringify({
      type: 'card/swipe', ts: Date.now(), panLast4: '4242', token: 'tok_xyz'
    } as DeviceEvent)), 600);
  }
});

// sims/printer/src/escpos-sink.ts (alt to CUPS): write bytes to file for artifacting
import { createWriteStream } from 'fs';
import { join } from 'path';

export function writeTicket(bytes: Buffer) {
  const file = join('/spool', `ticket-${Date.now()}.bin`);
  createWriteStream(file).end(bytes);
}

Angular 20+ client: SignalStore for device state and retry

// app/device.store.ts
import { Injectable, computed, effect, signal } from '@angular/core';

interface DeviceState {
  connected: boolean;
  printerReady: boolean;
  lastSwipe?: { panLast4: string; token: string; ts: number };
  error?: { code: string; detail?: string };
}

@Injectable({ providedIn: 'root' })
export class DeviceStore {
  private state = signal<DeviceState>({ connected: false, printerReady: false });
  connected = computed(() => this.state().connected);
  printerReady = computed(() => this.state().printerReady);
  lastSwipe = computed(() => this.state().lastSwipe);
  error = computed(() => this.state().error);

  private ws?: WebSocket;
  private retries = 0;

  connect(url = 'ws://localhost:7071') {
    const backoff = Math.min(1000 * 2 ** this.retries + Math.random() * 250, 10_000);
    this.ws = new WebSocket(url);
    this.ws.onopen = () => {
      this.retries = 0;
      this.state.update(s => ({ ...s, connected: true }));
    };
    this.ws.onclose = () => {
      this.state.update(s => ({ ...s, connected: false }));
      setTimeout(() => { this.retries++; this.connect(url); }, backoff);
    };
    this.ws.onmessage = (m) => {
      const evt = JSON.parse(m.data as string) as any;
      if (evt.type === 'device/connected') this.state.update(s => ({ ...s, connected: true }));
      if (evt.type === 'card/swipe') this.state.update(s => ({ ...s, lastSwipe: evt }));
      if (evt.type === 'device/error') this.state.update(s => ({ ...s, error: evt }));
    };
  }
}

<!-- app.component.html (PrimeNG banner + action) -->
<p-messages *ngIf="device.error()" severity="error" [value]="[{ detail: 'Device error: ' + device.error()?.code }]">
</p-messages>
<p-tag *ngIf="device.connected()" severity="success" value="Device connected"></p-tag>
<button pButton label="Print Boarding Pass" [disabled]="!device.connected() || !device.printerReady()"></button>

// Kiosk-friendly density & focus (AA)
:root { --tap-target: 44px; }
button { min-height: var(--tap-target); }

CI matrix: deterministic device states with Cypress

# .github/workflows/e2e.yml
name: e2e-device-scenarios
on: [push, pull_request]
jobs:
  e2e:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        scenario: [double_swipe, paper_jam, network_flap]
    env:
      SCENARIO: ${{ matrix.scenario }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - name: Start device sims
        run: |
          docker compose up -d --build
          npx wait-on tcp:7071 tcp:7072 http://localhost:631
      - name: Build Angular (Nx)
        run: npx nx build kiosk --configuration=ci
      - name: Run Cypress
        run: npx cypress run --browser chrome --record false
      - name: Collect artifacts
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: device-artifacts-${{ matrix.scenario }}
          path: |
            sims/printer/spool
            cypress/screenshots
            cypress/videos

When to Hire an Angular Developer for Legacy Rescue

See how I stabilize chaotic codebases with gitPlumbers (99.98% uptime during modernizations): https://gitplumbers.com/ — and how I approach AI‑assisted auth and verification in an enterprise setting with this Angular + AI integration example: https://getintegritylens.com/

Security and governance for device sims

Practical wrap‑up and next steps

• Start with one device (usually printer) and one flaky scenario. Make it green in CI.
• Move UI to Signals/SignalStore so state is obvious and testable.
• Add scenarios to your matrix until your field bug backlog stops growing.

If you want to hire an Angular consultant who’s shipped this pattern at Fortune 100 scale, I’m available for remote engagements. Review your Angular build or discuss your kiosk roadmap at https://angularux.com/pages/contact