🧩 Integrate OpenAPI TypeScript Client into Angular 19 with Signals

🧩 Integrate OpenAPI TypeScript Client into Angular 19 with Signals

Goal: Use the generated OpenAPI TS client to communicate with the backend, and manage state using Angular Signals and SignalStore.

✅ Tasks

1. Setup SignalStore

• Create a signal store (apiStore) in frontend/src/app/stores/
• Store loading state, errors, and response data
• Export actions for component usage

2. Create ApiService Wrapper

• Create api.service.ts in frontend/src/app/services/
• Inject OpenAPI-generated services (e.g., DefaultService)
• Wrap service methods to return observables or promises
• Handle and log HTTP errors gracefully

3. Create Example Feature

• Create a component that:
  • Triggers an API call using the store
  • Displays loading/error/success state
  • Uses Signals for UI updates

4. Optional: Add Test Coverage

• Unit test the SignalStore and ApiService
• Mock OpenAPI responses

📁 Suggested Structure

frontend/
├── src/
│ ├── app/
│ │ ├── api/ # OpenAPI-generated
│ │ ├── services/
│ │ │ └── api.service.ts
│ │ ├── stores/
│ │ │ └── api.store.ts
│ │ └── features/
│ │ └── sample/
│ │ └── sample.component.ts

🔜 Next Steps (Separate Issues)

• Add tests to CI
• Extend SignalStore pattern across features
• Trigger OpenAPI client generation automatically in CI
• Cloud Foundry deploy with OpenAPI client

Labels: 🔄 openapi, 🧱 frontend, 🌐 angular, 📦 integration, ⚡ state, 🧪 test
Milestone: M1 - Backend MVP
Project: OpenAPI Angular Spring Example