🧠 Clean Code in Angular – Praktisch, konkret, teamfähig

Clean Code ist kein Selbstzweck – er macht Teams schneller, Features sicherer und Bugs seltener.
In Angular heißt das: klare Komponenten, einfache Services und strukturierte Features.

In diesem Beitrag zeige ich dir, wie du sauberen Angular-Code schreibst, der sich liest wie ein gutes Buch.

✨ 1. Komponenten

✅ Klar benennen:

app-portfolio-summary.component.ts

➡ Kein Component1, TestBox, Blah.

✅ Trennen nach Funktion:

• Smart = State, API, Events
• Dumb = Darstellung, Inputs/Outputs

✅ Standalone bevorzugen:

@Component({
  standalone: true,
  imports: [...],
})

⚙️ 2. Services

• Max. 100 Zeilen pro Service
• Nur 1 Verantwortung pro Service
• Naming: AuthService, UserStore, ProductApiService

➡ Kombiniere Services + Signals für moderne Stores

📦 3. Feature-Struktur

libs/
├── portfolio/
│   ├── shell/
│   ├── ui/
│   ├── data-access/
│   └── utils/

➡ Trennung von UI, Logik, Daten – wie DDD in Angular

🧪 4. Tests = Dokumentation

• describe('when user is logged in')
• Nutze jest oder vitest mit Mocks
• Dumb Components = leicht testbar, keine DI

🧱 5. Konsistenz > Brillanz

• Gleiche Pattern überall
• Vorlagen für Features
• Custom ESLint-Regeln erzwingen
• README.md für jedes Feature mit Owner + Beschreibung

🛑 Was du vermeiden solltest

• ❌ Megakomponenten mit 500+ Zeilen
• ❌ any als Shortcut
• ❌ DOM-Manipulation via document.querySelector

✅ Fazit

Clean Code in Angular bedeutet:

• 💡 Lesbarkeit > Cleverness
• 🔄 Wiederverwendbarkeit > Redundanz
• 👥 Teamfähigkeit > Ego-Code

📍 Bald im Blog: ⚙️ Angular Build-Optimierung – Assets, Fonts & Bundle Magic