Änderungen an Angular-Websites prüfbar halten
Führe die konfigurierten TypeScript-, Template- und SCSS-Prüfungen aus und kontrolliere anschließend die betroffenen gerenderten Seiten.
Diese Website trennt Seiteninhalte von gemeinsam genutzten Darstellungskomponenten. Der folgende Ablauf hilft, diese Trennung bei Änderungen an Texten, Stilen und Layouts beizubehalten.
Vorhandene Inhaltsmodule und Prüfungen nutzen
Die Seiteninhalte liegen in src/app/content/. Gemeinsame Komponenten stellen sie dar. Die Projektskripte prüfen TypeScript, Angular-Templates, SCSS und Inhaltsstruktur und erzeugen einen statischen Build.
Screenshots nach Aufnahmezeit und Projekt. Herkunftsangaben bleiben sichtbar, auch mocked. Ein Screenshot allein belegt keinen bestandenen Test. Originalaufnahme; die Produktoberfläche enthält englische Texte.
- Bearbeite Texte im zuständigen Inhaltsmodul.
- Prüfe bei Änderungen an einer gemeinsamen Darstellungskomponente alle betroffenen Seiten.
- Halte Befehle und Ergebnisse für den aktuellen Quellstand fest.
Prüfen, was automatische Checks nicht entscheiden
Konfigurierte Lint-Regeln können bestimmte Quellcodeprobleme erkennen. Sie belegen nicht, dass eine Seite verständlich, gut bedienbar oder in jeder Fenstergröße korrekt dargestellt ist. Prüfe diese Aspekte an der gerenderten Website.
- Halte Zuständigkeiten für Inhalt, Navigation und Darstellung klar.
- Prüfe Überschriften, Linktexte, Fokusverhalten und mobile Navigation.
- Prüfe nach einer gemeinsamen Layoutänderung beide Sprachfassungen.
Prüfungen ausführen und Befunde bearbeiten
Nutze die konfigurierten Befehle und lies ihre Ausgabe. Trenne bestehende Fehler von neu entstandenen Problemen. Ein nicht abgeschlossener Befehl gilt nicht als bestanden.
Der gemeinsame Projektprüflauf heißt npm run check. Halte ungelöste Fehler in einer konkreten Folgeaufgabe fest.
npm run lint:tsnpm run lint:templatesnpm run lint:scssnpm run validate:contentnpm run build:staticDie zuständige Komponente ändern
Ermittle vor einer Darstellungsänderung die zuständige gemeinsame Komponente und ihre abhängigen Seiten. Teile eine Komponente auf, wenn eine eigene Verantwortung oder wiederkehrende Struktur das rechtfertigt.
- Erhalte Abschnitts-IDs, Routenpfade und typisierte Inhaltsfelder.
- Halte Screenshot-Metadaten wiederverwendbar und unterscheide Aufnahmen von Diagrammen.
- Nutze die Dateigröße als Anlass zur Prüfung, nicht als Urteil.
Refactoring auf konkrete Probleme stützen
Suche nach wiederholtem Markup, unklaren Zuständigkeiten, kollidierenden Selektoren oder unzugänglichen Bedienelementen. Beschreibe vor dem Refactoring das betroffene Verhalten und die Prüfung der Verbesserung.
Eine zusammenhängende Änderung umsetzen
Halte Quellstand und Ausgangsergebnisse fest. Behebe ein ermitteltes Problem, führe die relevanten Prüfungen aus und kontrolliere die betroffenen Desktop- und Mobilseiten. Füge Diff und Prüfergebnisse der Aufgabe hinzu.