🧱 Clean Architecture in Angular mit Nx – Für skalierbare und wartbare Anwendungen

Clean Architecture ist kein Buzzword – sie ist ein Fundament.
Ein System, das dir hilft, auch nach 2 Jahren noch zu verstehen, warum dein Code so funktioniert – und wie du ihn erweitern kannst, ohne Angst zu haben.

In diesem Beitrag zeige ich dir, wie du Clean Architecture mit Nx im Angular-Kontext umsetzt:
modular, lesbar, zukunftssicher.

📐 Die Grundidee von Clean Architecture

Der Kern ist einfach:

• Trennung von Verantwortung (UI, Business-Logik, Datenzugriff)
• Unabhängigkeit von Frameworks
• Abhängigkeiten nur nach innen (Dependency Rule)
• Dreh- und Angelpunkt: das Domain-Modell

🔁 Die Ebenen

[ UI / Presentation ]
        ↓
[ Application Layer ]
        ↓
[ Domain Layer ]
        ↓
[ Infrastructure / Data ]

🧠 Warum Nx perfekt zur Clean Architecture passt

Nx bringt dir:

• modulare Trennung durch Libraries
• vollständige Kontrolle über Abhängigkeiten
• leichtes Refactoring durch Generators
• caching, affected builds & dependency graph out of the box

🧱 Beispielhafte Struktur mit Nx Workspace

apps/
└── web-app/

libs/
├── ui/               → Presentational Components
├── feature-user/     → Smart Components + State
├── domain-user/      → Interfaces, Entities, Use Cases
├── data-access-user/ → API-Calls, Services, HTTP

📦 Domain Layer

Das Herzstück deiner Anwendung.

// libs/domain-user/src/lib/entities/user.entity.ts
export interface User {
  id: string;
  name: string;
  email: string;
}

Use Case als Service:

export class GetUser {
  constructor(private repo: UserRepository) {}

  execute(id: string): Observable<User> {
    return this.repo.findById(id);
  }
}

🧩 Application Layer – Feature + State

Feature-Komponente ruft Use Case auf:

@Component({
  standalone: true,
  selector: 'app-user-page',
  template: `<app-user [user]="user()" />`,
})
export class UserPageComponent {
  private getUser = inject(GetUser);
  user = toSignal(this.getUser.execute('123'));
}

🌍 Infrastructure Layer – HTTP & Services

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

  findById(id: string): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

✅ Fazit

Clean Architecture mit Nx bringt dir:

• Trennung von Zuständigkeiten
• bessere Testbarkeit
• hohe Wartbarkeit & Lesbarkeit
• Zukunftssicherheit durch Workspace-Struktur

Es braucht etwas Disziplin – aber du wirst es dir spätestens beim dritten Feature danken.

📍 Bald verfügbar:
🧠 CQRS & Event Sourcing in Angular – Macht oder Mythos?

👉 Folge diesem Blog für mehr praxisnahe Architekturkonzepte.