new-landing-page-homenas

Table of Contents

Dev-Server starten
Wie der Dev-Proxy funktioniert
Debugging

API-Antwort direkt prüfen
Browser DevTools
Häufige Fehler

Source-Map-Warnung in Firefox
Directus-Items müssen published sein

Willkommen im Wiki.# Lokale Entwicklung

Dev-Server starten

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

# 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.