# .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](https://dotnet.microsoft.com/en-us/download/dotnet/9.0)
    
- [Node.js (LTS)](https://nodejs.org/)
    
- [Angular CLI ](https://angular.dev/)
    

### 🔧 Setup Instructions

1. **Install Angular dependencies**
    
    ⚠️ **Before starting the application for the first time**, run the following command in the `ClientApp` directory:     
    ```bash
        cd src/ClientApp
        npm install
    ```
    
2. **Run the application**
    
    Go back to the API folder and start the backend server:  
    ```bash
     cd src/API
	    dotnet run --launch-profile angular_dev
    ```    
    
3. **Access the app**
    
    - Angular frontend: [http://localhost:44492](http://localhost:44492)
        
    - Swagger UI (API docs): [http://localhost:5184/swagger](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):
   ```bash
   cd src/ClientApp
   npm install
   ```
2. Tests im Watch-Modus starten (öffnet den Browser, ideal für Entwicklung):
   ```bash
   npm test
   ```

### Headless/CI und Coverage

- Einmalige Testausführung mit Coverage-Bericht (headless):
  ```bash
  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:
  ```bash
  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`).