Dockerizing Hardware Simulation for Angular 20+: Kiosk, Scanner, and Printer Emulators That Speed Up CI and Defect Reproduction

Dockerized Hardware Simulation: Reproducible Kiosk Bugs Without the Airport

As companies plan 2025 Angular roadmaps, getting hardware behaviors into dev/CI is the difference between guessing and shipping. If you need a remote Angular developer with Fortune 100 experience, this is how I set teams up to win.

Why Angular 20+ Teams Need Hardware Emulators in Dev and CI

For teams evaluating whether to hire an Angular consultant, this is high-leverage platform work: one-time setup, ongoing compounding value.

Architecture: Docker Compose Peripherals, Typed Events, and Angular 20 Signals

# docker-compose.sim.yml
version: "3.8"
services:
  nats:
    image: nats:2
    ports: ["4222:4222"]
    healthcheck:
      test: ["CMD", "nats", "--server", "nats://localhost:4222", "req", "health", "ping"]
      interval: 10s
      timeout: 3s
      retries: 3

  card-reader-sim:
    build: ./sims/card-reader
    environment:
      - NATS_URL=nats://nats:4222
      - SIM_PROFILE=spiky-load
    ports: ["7001:7001"]
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:7001/health"]
      interval: 5s
      timeout: 2s
      retries: 5
    depends_on: [nats]

  scanner-sim:
    build: ./sims/scanner
    ports: ["7002:7002"]
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:7002/health"]
      interval: 5s
      timeout: 2s
      retries: 5

  printer-sim:
    build: ./sims/printer
    volumes:
      - ./artifacts/receipts:/app/out
    ports: ["7003:7003"]
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:7003/health"]
      interval: 5s
      timeout: 2s
      retries: 5

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

// Typed event schema
type CardSwipeEvent = {
  type: 'card:swipe';
  schema: 'card-swipe@v1';
  deviceId: string;
  maskedPan: string; // **** **** **** 1234
  ts: number; // epoch ms from simulator
};

const app = express();
const server = app.listen(7001, () => console.log('card-reader-sim :7001'));
const wss = new WebSocketServer({ server, path: '/events' });

app.get('/health', (_, res) => res.json({ ok: true }));
app.post('/error/jitter', (_, res) => {
  jitter = 0.4; // 40% packet drop to simulate flaky USB
  res.json({ jitter });
});

let jitter = 0.0;
function emitSwipe() {
  const ev: CardSwipeEvent = {
    type: 'card:swipe',
    schema: 'card-swipe@v1',
    deviceId: 'CR-01',
    maskedPan: '**** **** **** ' + Math.floor(1000 + Math.random() * 9000),
    ts: Date.now(),
  };
  wss.clients.forEach((ws: any) => {
    if (Math.random() > jitter) ws.send(JSON.stringify(ev));
  });
}
setInterval(emitSwipe, 5000);

// Angular 20 service using Signals + SignalStore to track device state
import { Injectable, signal, computed } from '@angular/core';
import { SignalStore, withState, patchState } from '@ngrx/signals';

interface DeviceState {
  status: 'offline' | 'online' | 'error';
  lastSwipe?: { maskedPan: string; ts: number };
  errors: string[];
}

@Injectable({ providedIn: 'root' })
export class CardReaderStore extends SignalStore(withState<DeviceState>({
  status: 'offline',
  errors: []
})) {
  readonly online = computed(() => this.state().status === 'online');

  connect(url = 'ws://localhost:7001/events') {
    const ws = new WebSocket(url);
    ws.onopen = () => patchState(this, { status: 'online' });
    ws.onclose = () => patchState(this, { status: 'offline' });
    ws.onerror = () => patchState(this, (s) => ({
      status: 'error',
      errors: [...s.errors, 'ws-error']
    }));
    ws.onmessage = (msg) => {
      const ev = JSON.parse(msg.data);
      if (ev.type === 'card:swipe' && ev.schema === 'card-swipe@v1') {
        patchState(this, { lastSwipe: { maskedPan: ev.maskedPan, ts: ev.ts } });
      }
    };
  }
}

CI/CD Integration with Nx, GitHub Actions, and Cypress

# .github/workflows/e2e-sim.yml
name: e2e-sim
on:
  pull_request:
    paths: ['apps/**', 'sims/**', 'tools/**']

jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20 }
      - run: npm ci
      - name: Start simulators
        run: |
          docker compose -f docker-compose.sim.yml up -d --build
          # wait for health
          until curl -sf http://localhost:7001/health; do sleep 2; done
          until curl -sf http://localhost:7002/health; do sleep 2; done
          until curl -sf http://localhost:7003/health; do sleep 2; done
      - name: Build Angular app
        run: npx nx build kiosk --configuration=production
      - name: Serve preview & run Cypress
        run: |
          npx http-server dist/apps/kiosk -p 4200 &
          npx cypress run --config baseUrl=http://localhost:4200
      - name: Upload artifacts (receipts/logs)
        uses: actions/upload-artifact@v4
        with:
          name: sim-artifacts
          path: |
            artifacts/receipts/**
            sims/**/logs/*.log

Reproducing a Flaky USB Reader Defect in Minutes

# Local dev repro
npm ci
docker compose -f docker-compose.sim.yml up -d --build
curl -X POST http://localhost:7001/error/jitter   # induce flaky reader
npm run start  # Angular 20 app

<!-- Angular diagnostics panel (PrimeNG Buttons) -->
<p-button label="Flaky Reader" (onClick)="makeReaderFlaky()"></p-button>
<p-button label="Paper Out" (onClick)="paperOut()"></p-button>
<div>Reader online: {{ cardReaderStore.online() }}</div>
<div>Last swipe: {{ cardReaderStore.state().lastSwipe?.maskedPan }}</div>

When to Hire an Angular Developer for Hardware Simulation and CI

Need a partner who’s shipped real kiosk stacks, airline-grade flows, and enterprise dashboards? Let’s talk about your Angular roadmap and get CI sim-powered quickly.

Key Takeaways and Next Steps

• Emulate peripherals in Docker so every dev and PR can run the same device scenarios.
• Use typed event schemas and Angular 20 Signals/SignalStore for deterministic state.
• Gate PRs with simulator-backed Cypress; upload artifacts for forensics.
• Track MTTR, flake rate, and INP under event storms; prove stability, not vibes.
• Start with one device; expand to full kiosk flows and offline-first UX.

If you need an Angular expert for hire with Fortune 100 experience, I’m available for remote contracts. See NG Wave for Signal-driven UI polish, and review how I stabilize chaotic code at gitPlumbers.