Lokale-Entwicklung hinzugefügt
@@ -0,0 +1,65 @@
|
|||||||
|
Willkommen im Wiki.# Lokale Entwicklung
|
||||||
|
|
||||||
|
## Dev-Server starten
|
||||||
|
|
||||||
|
```bash
|
||||||
|
ng serve
|
||||||
|
```
|
||||||
|
|
||||||
|
Der Proxy (`proxy.conf.json`) ist in `angular.json` unter `serve.options.proxyConfig` eingetragen und wird automatisch verwendet — kein `--proxy-config` Flag nötig.
|
||||||
|
|
||||||
|
Die App ist erreichbar unter: `http://localhost:4200`
|
||||||
|
|
||||||
|
## Wie der Dev-Proxy funktioniert
|
||||||
|
|
||||||
|
| Request vom Browser | Proxy leitet weiter an |
|
||||||
|
| --- | --- |
|
||||||
|
| `/api/items/landingpage` | `http://directus.neugasse.lan/items/landingpage` + Token |
|
||||||
|
| `/api/assets/<uuid>` | `http://directus.neugasse.lan/assets/<uuid>` + Token |
|
||||||
|
| `/tasmota1/...` | `http://10.0.0.31/...` |
|
||||||
|
| `/tasmota2/...` | `http://10.0.0.32/...` |
|
||||||
|
|
||||||
|
Der Token wird aus `proxy.conf.json` injiziert — nicht aus dem Code.
|
||||||
|
|
||||||
|
## Debugging
|
||||||
|
|
||||||
|
### API-Antwort direkt prüfen
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Mit Token — sollte JSON liefern
|
||||||
|
curl -H "Authorization: Bearer DEIN_TOKEN" \
|
||||||
|
http://directus.neugasse.lan/items/landingpage | python3 -m json.tool | head -30
|
||||||
|
|
||||||
|
# Über Dev-Proxy (ng serve muss laufen)
|
||||||
|
curl http://localhost:4200/api/items/landingpage | python3 -m json.tool | head -30
|
||||||
|
```
|
||||||
|
|
||||||
|
### Browser DevTools
|
||||||
|
|
||||||
|
- **Network-Tab** → fehlgeschlagene Requests anklicken → Request URL und Headers prüfen
|
||||||
|
- URL muss `/api/items/landingpage` sein (relativ) — nie `http://directus.neugasse.lan/...`
|
||||||
|
- `Authorization`-Header muss im Request vorhanden sein
|
||||||
|
|
||||||
|
### Häufige Fehler
|
||||||
|
|
||||||
|
| Fehler | Ursache | Fix |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| 403 Forbidden | Token fehlt oder falsch | `proxy.conf.json` prüfen |
|
||||||
|
| 404 auf `/api/assets/?width=200` | `link.bild` ist `null` | Directus-Eintrag prüfen |
|
||||||
|
| `ng` öffnet Editor | Debian-`ng`-Konflikt | `sudo mv /usr/bin/ng /usr/bin/ng-editor` |
|
||||||
|
| Proxy greift nicht | `proxyConfig` fehlt in `angular.json` | Siehe Installation |
|
||||||
|
|
||||||
|
## Source-Map-Warnung in Firefox
|
||||||
|
|
||||||
|
```
|
||||||
|
Source-Map-Fehler: Error: request failed with status 404
|
||||||
|
Ressourcen-Adresse: http://localhost:4200/@vite/client
|
||||||
|
```
|
||||||
|
|
||||||
|
Diese Warnung ist harmlos — Angular CLI 21 verwendet Vite intern, Firefox DevTools findet keine Source-Maps für Vite-interne Dateien. Hat keinen Einfluss auf die App, einfach ignorieren.
|
||||||
|
|
||||||
|
## Directus-Items müssen `published` sein
|
||||||
|
|
||||||
|
Directus liefert standardmäßig nur Items mit `status: published`.
|
||||||
|
Items im Status `draft` erscheinen nicht in der Landing Page.
|
||||||
|
In Directus Admin-UI → Collection → Item → Status auf `published` setzen.
|
||||||
Reference in New Issue
Block a user