📁 Angular Folder- & File-Struktur – Clean. Klar. Erweitert.

(Wie du dein Projekt strukturierst – für Lesbarkeit, Skalierung & Teamarbeit)

Eine gute Projektstruktur ist kein „Nice-to-have“.
Sie ist der Unterschied zwischen Chaos und Klarheit, zwischen Wartungshölle und Entwicklerflow.

1️⃣ Prinzipien für den Aufbau

Feature-based statt Layer-based
Flat over nested (tiefe Strukturen vermeiden)
Trennung von UI, Logic und State
Saubere Namensgebung (kein x.component.ts ohne Kontext)

2️⃣ Beispielstruktur für ein mittelgroßes Projekt

src/
├── app/
│   ├── features/
│   │   ├── dashboard/
│   │   │   ├── components/
│   │   │   ├── services/
│   │   │   ├── state/
│   │   │   └── dashboard.routes.ts
│   │   └── account/
│   ├── shared/
│   │   ├── ui/
│   │   ├── pipes/
│   │   ├── directives/
│   │   └── utils/
│   └── core/
│       ├── services/
│       ├── interceptors/
│       ├── guards/
│       └── core.module.ts

3️⃣ Was in `core`, was in `shared`?

core = app-weite Logik (Auth, ErrorHandler, Interceptor)
shared = Wiederverwendbares UI (Buttons, Pipes, Directives)

4️⃣ Tipps für Teams

❗ Immer klare README.md in features/
🔒 Jede feature verwaltet ihren State selbst
🧪 Test-Dateien neben Komponenten (nicht separat)

5️⃣ Bonus: Naming-Konsistenz

Type	Pattern
Component	`xyz.component.ts`
Route	`xyz.routes.ts`
Feature Store	`xyz.store.ts`
Service	`xyz.service.ts`
Signal Store	`xyz.signalstore.ts`

Fazit

Mit der richtigen Struktur wird dein Angular-Projekt lesbarer, testbarer und teamfähig.
Glaub mir: Future You wird dir danken.

📦 Nächster Beitrag:
🔧 Angular Services – Der unterschätzte Backbone deiner Architektur