jhipster-angular

JHipster Angular -- Microservices

Develop the Angular frontend hosted in the Gateway, which transparently consumes multiple microservices through the Gateway's routing.

When to Use

• When creating screens that aggregate data from multiple services
• When building dashboards with data from different microservices
• When handling partial service failures gracefully in the UI
• When adding WebSocket real-time features via the Gateway

Available Operations

1. Create services that aggregate data from multiple backends
2. Handle partial service failures with fallback UI
3. Add WebSocket real-time updates
4. Build cross-service dashboards
5. Customize entity components from different services

Multi-Step Workflow

Step 1: Understand the Architecture

Browser --> Gateway:8080/api/demands --> demand-service:8081/api/demands
Browser --> Gateway:8080/api/agents  --> agent-service:8082/api/agents

The Angular app lives in the Gateway. From Angular's perspective, everything is a single API.

Step 2: Create Services That Aggregate Data

// dashboard.service.ts -- aggregates data from multiple services (via gateway)
@Injectable({ providedIn: 'root' })
export class DashboardService {
  constructor(
    private demandService: DemandService,
    private agentService: AgentService,
    private trackingService: TrackingService,
  ) {}

  getMetrics(): Observable<DashboardMetrics> {
    return forkJoin({
      activeDemands: this.demandService.countByStatus('IN_PROGRESS'),
      activeAgents: this.agentService.countByStatus('BUSY'),
      completedToday: this.trackingService.getCompletedToday(),
      complianceRate: this.trackingService.getComplianceRate(),
    });
  }
}

Step 3: Handle Partial Service Failures

getMetrics(): Observable<DashboardMetrics> {
  return forkJoin({
    activeDemands: this.demandService.countByStatus('IN_PROGRESS').pipe(
      catchError(() => of({ count: -1 }))  // -1 = unavailable
    ),
    activeAgents: this.agentService.countByStatus('BUSY').pipe(
      catchError(() => of({ count: -1 }))
    ),
  });
}