📚 Angular Projektstart-Playbook – Setup, Struktur, Best Practices

Der Anfang entscheidet.
Wer Angular-Projekte direkt sauber startet, spart später Stunden an Refactoring, Bugs & Diskussionen.

Hier ist dein Playbook für den perfekten Projektstart – bewährt in realen Kundenprojekten.

🧱 1. Projektstruktur

apps/
├── web/
libs/
├── feature/
├── shared/
├── core/
├── data-access/
├── ui/

• feature/ → domänenspezifische Use Cases
• shared/ → wiederverwendbare Pipes, Validators, Helper
• core/ → Services, Auth, Logging, Interceptors
• data-access/ → API, Models, Mappers
• ui/ → Dumb Components, Design-System

⚙️ 2. Setup mit Nx

npx create-nx-workspace@latest myorg

Standalone Components, Signals, Lazy Loading, Dependency Constraints → alles ab Werk.

🧪 3. Testing direkt mitdenken

• jest für Unit Tests
• playwright für E2E
• husky + lint-staged für Precommit Checks

➡ Linter + Formatierung = Pflicht

🔐 4. Security, Interceptors & Auth

{
  provide: HTTP_INTERCEPTORS,
  useClass: AuthInterceptor,
  multi: true
}

➡ Auth immer in core/ kapseln, Roles als Service injecten

📦 5. CI/CD ab Tag 1

• GitHub Actions / Azure DevOps
• nx affected:*
• nx lint, test, build, e2e

➡ Feedback in unter 10 Sekunden nach Push

💡 6. Weitere Best Practices

• ADRs für Architekturentscheidungen
• ESLint-Regeln hart setzen
• Tailwind oder Angular Material für schnelles UI
• Signals als Default für State

✅ Fazit

Ein guter Projektstart ist wie ein solides Fundament:

• 📐 Struktur
• 🔁 Wiederverwendung
• 🧪 Tests & CI
• ⚡ Performance & UX

📍 Bald im Blog: 🧠 Clean Code in Angular – Praktisch, konkret, teamfähig