Chore/dependency updates (#88)

* chore: update dependencies to latest versions

## Angular
- @angular/compiler: ^19.2.20 → ^22.0.1 (version mismatch fix)
- @angular/compiler-cli: 19.2.19 → ^22.0.1
- @angular/cli: 21.2.2 → ^22.0.8
- @angular-devkit/build-angular: 21.2.19 → ^22.0.8
- Remove @angular/build override (19.2.22)

## TypeScript
- typescript: ~5.6.3 → ~6.0.0 (required by Angular 22)
- tsconfig.json: add ignoreDeprecations: '6.0' for baseUrl & downlevelIteration

## NgRx
- @ngrx/schematics: ^19.0.0 → ^21.1.1 (align with other ngrx packages)

## ngx-translate v15 → v18
- TranslateModule removed: replaced with standalone TranslatePipe per component
- TranslateModule.forRoot() → provideTranslateService({ lang, fallbackLang })
- HttpLoaderFactory → provideTranslateHttpLoader({ prefix, suffix })
- TranslateService.setDefaultLang removed: configured via provideTranslateService
- currentLang is now a Signal: use currentLang() instead of currentLang

## Tailwind CSS v3 → v4
- tailwindcss: ^3.4.16 → ^4.3.3
- Add @tailwindcss/postcss: ^4.3.3 (replaces tailwindcss in postcss.config)
- postcss.config.js: tailwindcss:{} → '@tailwindcss/postcss':{}
- autoprefixer removed from postcss (built into Tailwind v4)
- styles.scss: @tailwind directives → @import 'tailwindcss'
- Plugin imports moved to CSS: @plugin '@tailwindcss/typography/forms'
- Dark mode, theme, sources configured via CSS directives
- tailwind.config.ts deleted (config now lives in styles.scss)
- Tailwind plugins moved from dependencies → devDependencies
- @tailwindcss/forms: ^0.5.9 → ^0.5.11
- @tailwindcss/typography: ^0.5.15 → ^0.5.20
- @tailwindcss/aspect-ratio removed (built into Tailwind v4)

## Other
- zone.js: ^0.15.0 → ^0.16.0
- @ngx-translate/core: ^15.0.0 → ^18.0.0
- @ngx-translate/http-loader: ^8.0.0 → ^18.0.0

* fix: correct Tailwind v4 + Angular build integration

- angular.json: migrate all builders from @angular-devkit/build-angular
  to @angular/build (official esbuild builder, removes deprecation warning)
- postcss.config.js → postcss.config.json: @angular/build only reads
  JSON PostCSS config, not .js files
- styles.scss → styles.css: Tailwind v4 requires a plain CSS file so
  PostCSS (@tailwindcss/postcss) runs before esbuild resolves imports;
  @source directive explicitly scans src/**/*.{html,ts} for utility classes
- error.interceptor.ts: fix circular DI dependency (TranslateService →
  TranslateHttpLoader → HttpClient → interceptor → TranslateService)
  by using lazy inject(Injector) instead of eager inject(TranslateService)

* fix: migrate Tailwind v3 opacity utilities to v4 slash syntax

Replace deprecated bg-opacity-*, text-opacity-*, etc. with the
Tailwind v4 slash syntax (e.g. bg-white/20, bg-black/50) across:
- footer.component.html: bg-white bg-opacity-20 → bg-white/20
- header.component.html: bg-opacity-90 → bg-white/90 dark:bg-gray-900/90
- home.component.html: text-opacity-90, dark:bg-opacity-20
- api-demo.component.html: dark:bg-opacity-20
- features-demo.component.html: dark:bg-opacity-20
- loading-spinner.component.ts: bg-opacity-50 → bg-black/50
- modal.component.ts: bg-opacity-50 → bg-black/50

* chore: remove postcss.config.js (restored by lint-staged stash)

* chore: reorder imports in modal.component.ts for consistency

* chore: release v2.0.0

- Bump version to 2.0.0 (major: Angular 22, Tailwind 4, TypeScript 6)
- Add docs/CHANGELOG.md with full migration notes
- Update README badges and Key Features for Angular 22 / Tailwind 4
- Add Changelog link to Documentation section

Author: heyding

README.md

@@ -1,10 +1,10 @@
 # D-Stack Angular Template
 
-Angular 19 Starter-Template mit Tailwind CSS, NgRx, i18n, OpenAPI-Client-Generierung und GitHub-Pages-Deployment.
+Angular 22 Starter-Template mit Tailwind CSS 4, NgRx 21, i18n, OpenAPI-Client-Generierung und GitHub-Pages-Deployment.
 
-[![Angular](https://img.shields.io/badge/Angular-19.2-red?logo=angular)](https://angular.io)
-[![TypeScript](https://img.shields.io/badge/TypeScript-5.6-blue?logo=typescript)](https://www.typescriptlang.org/)
-[![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.4-38bdf8?logo=tailwind-css)](https://tailwindcss.com)
+[![Angular](https://img.shields.io/badge/Angular-22-red?logo=angular)](https://angular.io)
+[![TypeScript](https://img.shields.io/badge/TypeScript-6.0-blue?logo=typescript)](https://www.typescriptlang.org/)
+[![Tailwind CSS](https://img.shields.io/badge/Tailwind-4.3-38bdf8?logo=tailwind-css)](https://tailwindcss.com)
 [![GitHub Pages](https://img.shields.io/badge/Deploy-GitHub%20Pages-222?logo=github)](https://heyding.github.io/angular-tailwind-template/)
 
 ## Live Demo
@@ -24,6 +24,7 @@ App läuft danach unter `http://localhost:4200`.
 
 ## Documentation
 
+- [Changelog](docs/CHANGELOG.md)
 - [Customization Guide](docs/CUSTOMIZATION.md)
 - [Deployment Guide](docs/DEPLOYMENT.md)
 - [Pre-commit Hooks](docs/PRE-COMMIT-HOOKS.md)
@@ -45,10 +46,10 @@ Konfigurierbar sind u. a.:
 
 ## Key Features
 
-- Angular 19 mit Standalone Components
-- Tailwind CSS 3 + Dark Mode
-- NgRx Store + lokale Persistenz
-- i18n (`de` / `en`)
+- Angular 22 mit Standalone Components und `@angular/build` (esbuild-nativ)
+- Tailwind CSS 4 + Dark Mode (CSS-first Konfiguration)
+- NgRx 21 Store + lokale Persistenz
+- i18n (`de` / `en`) via ngx-translate 18
 - OpenAPI-Client-Generierung (`ng-openapi-gen`)
 - Playwright Smoke Tests + Lighthouse CI
 - DSGVO-relevante Seiten (Datenschutz/Impressum/Cookie-Banner)

angular.json

@@ -15,25 +15,16 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist/angular-tailwind-template",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
-            "allowedCommonJsDependencies": [
-              "deepmerge"
-            ],
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "allowedCommonJsDependencies": ["deepmerge"],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           },
           "configurations": {
@@ -67,7 +58,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "options": {
             "buildTarget": "angular-tailwind-template:build"
           },
@@ -82,24 +73,17 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
+            "assets": ["src/favicon.ico", "src/assets"],
+            "styles": ["src/styles.css"],
             "scripts": []
           }
         }

docs/CHANGELOG.md

@@ -0,0 +1,76 @@
+# Changelog
+
+## [2.0.0] – 2026-07-25
+
+### Breaking Changes
+
+#### Angular 22
+- Alle `@angular/*`-Pakete von v19/v21 auf **v22.0.1** aktualisiert
+- `@angular/cli` und `@angular-devkit/build-angular` auf **v22.0.8**
+- Builder in `angular.json` von `@angular-devkit/build-angular:application` auf `@angular/build:application` migriert (esbuild-nativer Build ohne Webpack-Umweg)
+
+#### TypeScript 6
+- `typescript` von `~5.6.3` auf **~6.0.0**
+- `tsconfig.json`: `"ignoreDeprecations": "6.0"` ergänzt (für `baseUrl` und `downlevelIteration`)
+
+#### Tailwind CSS 4
+- `tailwindcss` von `^3.4.16` auf **^4.3.3**
+- `@tailwindcss/postcss` als separates PostCSS-Plugin hinzugefügt
+- `@tailwindcss/aspect-ratio` entfernt (in Tailwind v4 integriert)
+- `styles.scss` → `styles.css` (Sass entfällt; PostCSS verarbeitet CSS direkt)
+- CSS-Konfiguration statt `tailwind.config.ts`:
+  - `@import "tailwindcss"` statt `@tailwind`-Direktiven
+  - Plugins via `@plugin`, Dark Mode via `@variant dark`
+  - Content-Pfade via `@source`
+- `postcss.config.js` → `postcss.config.json` (`@angular/build` liest nur JSON-Format)
+- Alle veralteten Opacity-Utilities migriert: `bg-opacity-*`, `text-opacity-*` → Slash-Syntax (`bg-black/50`, `text-white/90` usw.)
+
+#### ngx-translate 18
+- `@ngx-translate/core` von `^15.0.0` auf **^18.0.0**
+- `@ngx-translate/http-loader` von `^8.0.0` auf **^18.0.0**
+- `TranslateModule` entfernt – alle Komponenten nutzen nun `TranslatePipe` (standalone)
+- Konfiguration in `app.config.ts` auf neue Provider-API migriert:
+  - `provideTranslateService({ lang, fallbackLang })`
+  - `provideTranslateHttpLoader({ prefix, suffix })`
+- `currentLang` ist jetzt ein Angular **Signal** → Aufruf als `currentLang()` (Klammern erforderlich)
+
+#### NgRx 21
+- `@ngrx/store`, `@ngrx/effects`, `@ngrx/store-devtools` auf **v21.1.1**
+- `@ngrx/schematics` von `^19.0.0` auf **^21.1.1** angepasst
+
+#### zone.js
+- `zone.js` von `^0.15.0` auf **^0.16.0**
+
+---
+
+### Bug Fixes
+
+- **Circular DI (NG0200)**: `error.interceptor.ts` injizierte `TranslateService` eager während der Translations-initialisierung. Behoben durch Lazy-Injection via `inject(Injector)` mit `injector.get(TranslateService)` im `catchError`-Block.
+- **Footer-Banner-Icon**: `bg-white bg-opacity-20` (Tailwind v3) zeigte solides Weiß statt 20 % Transparenz. Behoben mit `bg-white/20`.
+
+---
+
+### Dependency Summary
+
+| Paket | Vorher | Nachher |
+|---|---|---|
+| `@angular/*` | 19.x / 21.x | **22.0.x** |
+| `@angular/cli` | 21.2.x | **22.0.x** |
+| `typescript` | ~5.6.3 | **~6.0.0** |
+| `tailwindcss` | ^3.4.16 | **^4.3.3** |
+| `@tailwindcss/postcss` | – | **^4.3.3** *(neu)* |
+| `@ngx-translate/core` | ^15.0.0 | **^18.0.0** |
+| `@ngx-translate/http-loader` | ^8.0.0 | **^18.0.0** |
+| `@ngrx/*` | 19.x / 21.x | **21.1.1** |
+| `zone.js` | ^0.15.0 | **^0.16.0** |
+| `@tailwindcss/aspect-ratio` | ^0.4.x | *entfernt* |
+
+---
+
+## [1.0.0] – Initial Release
+
+- Angular 19 Starter-Template
+- Tailwind CSS 3, NgRx, i18n (de/en)
+- OpenAPI-Client-Generierung
+- DSGVO-Seiten, Cookie-Banner
+- GitHub Pages Deployment