📦 Angular Modulstruktur – Wie du große Apps übersichtlich hältst

Große Angular-Projekte können schnell chaotisch werden.
Mit der richtigen Modulstruktur sorgst du für Klarheit, Skalierbarkeit und Teamproduktivität.

🧠 1. Features statt Technik

Falscher Ansatz:

📂 components/
📂 services/
📂 models/

Besser:

📂 features/
  ┣ 📂 dashboard/
  ┣ 📂 kunden/
  ┗ 📂 vertragsdaten/

➡ Gruppiere nach Business-Domain, nicht Technik

🧱 2. Module-Typen

Typ	Zweck
Feature	Isoliert eine fachliche Funktionalität
UI/Shared	Wiederverwendbare UI-Komponenten
Core	Singleton-Services, globale Anbieter
Shell	Entry Module für App / Bereich

🗂 3. Beispielstruktur (Nx-kompatibel)

libs/
  ┣ features/
  ┃ ┗ dashboard/
  ┣ ui/
  ┃ ┗ button/
  ┣ core/
  ┃ ┗ auth/
  ┗ util/
    ┗ date-format/

➡ Kombinierbar mit Standalone Components & Signals

✅ Best Practices

Halte Feature-Module unabhängig
Exporte bewusst einschränken
Nutze index.ts für öffentliche API
Verwende barrel-Dateien (public-api.ts bei Libraries)

🧩 Bonus: Feature Shell Pattern

// dashboard.shell.ts
@Component({ standalone: true, imports: [RouterModule, DashboardFeature] })
export class DashboardShellComponent {}

➡ Einstiegspunkt mit Loader, Routing & Container-Komponenten

💬 Fazit

Struktur = Skalierung.
Mit Feature-Modulen, Shells & klaren Boundaries baust du Angular-Apps, die wachsen können.

📍 Nächster Beitrag:
📈 Angular Observability – Logs, Metrics & Fehler richtig erfassen