DotNetAngular/README.md

.NET + Angular Application Template

This project is a full-stack web application Template combining ASP.NET Core for the backend and Angular for the frontend.

🛠️ Technologies Used

• Backend: ASP.NET Core (.NET 9)

• Frontend: Angular

• API Documentation: Swagger (Swashbuckle)

🚀 Getting Started

Prerequisites

• .NET 9 SDK

• Node.js (LTS)

• Angular CLI

🔧 Setup Instructions

1. Install Angular dependencies

   ⚠️ Before starting the application for the first time, run the following command in the ClientApp directory:

       cd src/ClientApp
       npm install
   

2. Run the application

   Go back to the API folder and start the backend server:

    cd src/API
       dotnet run --launch-profile angular_dev
   

3. Access the app

   • Angular frontend: http://localhost:44492

   • Swagger UI (API docs): http://localhost:5184/swagger

   ---

🧪 Angular-Tests ausführen (Wie mache ich Tests in Angular?)

Die Angular-Frontend-Tests sind mit Karma + Jasmine eingerichtet. Alle Testdateien enden auf .spec.ts und liegen neben den jeweiligen Komponenten/Services im Ordner src/ClientApp/src/.

Schnellstart

1. Abhängigkeiten installieren (falls noch nicht erledigt):

   cd src/ClientApp
   npm install
   

2. Tests im Watch-Modus starten (öffnet den Browser, ideal für Entwicklung):

   npm test
   

Headless/CI und Coverage

• Einmalige Testausführung mit Coverage-Bericht (headless):

  cd src/ClientApp
  npm run test:coverage
  

  Der Coverage-Report wird unter src/ClientApp/coverage/ erzeugt (HTML-Report in index.html).

• CI-freundliche Ausführung in Chrome Headless inklusive Coverage:

  cd src/ClientApp
  npm run test:ci
  

  Hinweis: Für Headless-Tests muss eine Chrome/Chromium-Laufzeit auf der Maschine vorhanden sein.

Wo schreibe ich Tests?

• Komponenten: src/app/components/<name>/<name>.component.spec.ts
• Services: src/app/services/<name>.service.spec.ts
• App-Komponenten: src/app/app.component.spec.ts

Beispiele sind bereits im Projekt vorhanden (z. B. gitea.service.spec.ts, about-me.component.spec.ts).

Nützliche Tipps

• Testbefehle (npm Scripts) befinden sich in src/ClientApp/package.json:
  • npm test – Watch-Modus mit Browser
  • npm run test:coverage – Headless, einmalig, mit Coverage
  • npm run test:ci – Headless, ohne Watch, mit Coverage (für CI)
• Die Angular-CLI liest die Testkonfiguration aus angular.json (Target test) und tsconfig.spec.json.
• Falls Sie auf Servern ohne GUI testen: Verwenden Sie die Headless-Skripte (test:ci/test:coverage).