⚙️ Angular API-Integration – Clean, Typed, Testbar

(Baue eine starke Brücke zwischen Frontend & Backend)

Die API ist das Rückgrat jeder Angular-App. Aber:
Wie integrierst du sie sauber, typisiert und testbar?

1️⃣ Typisierung mit HttpClient + interfaces

Statt any verwende klar typisierte Interfaces:

export interface UserDto {
  id: string;
  name: string;
  email: string;
}

this.http.get<UserDto[]>('/api/users');

Nutze generische Typen überall – und vermeide unnötige any.

2️⃣ API-Service Layer (Separation of Concerns)

Erstelle eigene Services für HTTP-Calls:

@Injectable({ providedIn: 'root' })
export class UserApiService {
  constructor(private http: HttpClient) {}

  getUsers(): Observable<UserDto[]> {
    return this.http.get<UserDto[]>('/api/users');
  }
}

✅ Vorteil: Austauschbar, testbar, keine Logik im Component Code

3️⃣ Reactive State trennen

Trenne API-Aufrufe von UI-State. Beispiel mit SignalStore:

export const users = signal<UserDto[]>([]);

effect(() => {
  userApi.getUsers().subscribe((result) => users.set(result));
});

📌 Vermeide direktes .subscribe() in der Komponente.

4️⃣ Error-Handling & Retry

this.http.get('/api/data').pipe(
  retry(2),
  catchError((err) => {
    console.error('API Fehler:', err);
    return of([]);
  })
);

Schreibe zentrale Error-Handler (HttpInterceptor, ApiErrorService).

5️⃣ Unit Tests für API-Services

Nutze HttpTestingController aus @angular/common/http/testing:

httpMock.expectOne('/api/users').flush(mockUsers);

✅ Vorteil: Keine echten API-Calls im Test.

Fazit

Clean Architecture beginnt bei der API.
Typisierung, Separation und Testing sind Schlüssel für eine robuste Frontend-Backend-Kommunikation.

📚 Nächster Beitrag:
🧩 Angular Libraries – Struktur, Versionierung & Veröffentlichung