Umgang mit Nicht Vorhandenen Routen in Angular
Manchmal geben Benutzer eine falsche URL manuell ein oder klicken auf einen veralteten Link. In solchen Fällen ist es wichtig, eine deutliche „Seite nicht gefunden“-Meldung anzuzeigen, anstatt einen leeren Bildschirm oder einen technischen Fehler. In diesem Modul erstellen wir eine 404-Seite-Komponente, konfigurieren unsere Routen so, dass sie bei allen unbekannten Pfaden angezeigt wird, und fügen ein ansprechendes Styling hinzu.
Erstellen der NotFoundComponent
Wir erstellen eine neue Angular-Komponente mit dem Namen NotFoundComponent, die als unsere 404-Seite dient. Sie zeigt eine Überschrift, eine kurze Fehlermeldung und einen Button, um den Benutzer zurück zur Startseite zu leiten.
Führen Sie den folgenden Befehl aus, um die Komponente zu generieren:
Dadurch wird automatisch ein not-found-Ordner mit vier Dateien erstellt. Sie kennen diese Dateien bereits und können die Testdatei löschen, wenn Sie sie nicht verwenden.
Erstellen der Komponente
Hinzufügen des HTML-Codes zur Anzeige eines "404"-Titels, einer einfachen Nachricht und eines "Zur Startseite"-Buttons:
not-found-conponent.html
not-found-conponent.css
Ein einfaches Layout mit einem besonderen Element — der Methode goToHome(). Beim Klicken des Buttons erfolgt eine Weiterleitung des Nutzers zur Startseite.
Wir haben außerdem etwas CSS hinzugefügt, um die 404-Seite optisch ansprechend zu gestalten — zentrierter Text, eine auffällige Überschrift und eine schlichte, helle Schaltfläche.
Hinzufügen der Navigationslogik
Nun wird die Methode implementiert, um den Benutzer zurück zur Startseite zu navigieren.
not-found-conponent.ts
Hier wird der Angular-Router injiziert, um manuell zwischen Routen zu navigieren. In der Methode goToHome() wird navigate(['/']) verwendet, um den Benutzer zur Root-Route weiterzuleiten.
Behandlung aller unbekannten Routen
Nun wird die Routing-Konfiguration der App so angepasst, dass der NotFoundComponent für alle nicht definierten Pfade angezeigt wird.
Fügen Sie in Ihrer Datei app.routes.ts die folgende Route ganz am Ende hinzu:
routes.ts
Der Pfad ** ist ein Platzhalter, der jede Route abfängt, die zuvor nicht übereinstimmt. Zum Beispiel wird beim Navigieren zu /wrong-url die 404-Seite angezeigt.
Warum sollte die Wildcard-Route immer zuletzt stehen?
In Angular wird die Routen-Konfiguration der Reihenfolge nach ausgewertet – von oben nach unten. Das bedeutet, dass der Router jede Route nacheinander prüft und bei einem Treffer die Suche beendet.
Die Wildcard-Route ({ path: '**' }) ist eine Auffangroute. Sie passt auf jeden Pfad, der von den vorherigen Routen nicht abgedeckt wurde. Wenn sie vor spezifischeren Routen platziert wird, fängt sie alles ab und die restlichen Routen werden nie erreicht – selbst wenn sie gültig sind.
Die Anwendung behandelt Navigationsfehler jetzt elegant: Anstatt abzustürzen oder einen leeren Bildschirm anzuzeigen, sehen Nutzer eine freundliche 404-Nachricht mit einer klaren Rückkehrmöglichkeit zur Startseite.
Die Anwendung ist nun vollständig funktionsfähig und benutzerfreundlich! 🎉 Um die vollständige Version dieses Projekts herunterzuladen, einfach auf den untenstehenden Button klicken.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
Awesome!
Completion rate improved to 3.13Umgang mit Nicht Vorhandenen Routen in Angular
Swipe um das Menü anzuzeigen
Manchmal geben Benutzer eine falsche URL manuell ein oder klicken auf einen veralteten Link. In solchen Fällen ist es wichtig, eine deutliche „Seite nicht gefunden“-Meldung anzuzeigen, anstatt einen leeren Bildschirm oder einen technischen Fehler. In diesem Modul erstellen wir eine 404-Seite-Komponente, konfigurieren unsere Routen so, dass sie bei allen unbekannten Pfaden angezeigt wird, und fügen ein ansprechendes Styling hinzu.
Erstellen der NotFoundComponent
Wir erstellen eine neue Angular-Komponente mit dem Namen NotFoundComponent, die als unsere 404-Seite dient. Sie zeigt eine Überschrift, eine kurze Fehlermeldung und einen Button, um den Benutzer zurück zur Startseite zu leiten.
Führen Sie den folgenden Befehl aus, um die Komponente zu generieren:
Dadurch wird automatisch ein not-found-Ordner mit vier Dateien erstellt. Sie kennen diese Dateien bereits und können die Testdatei löschen, wenn Sie sie nicht verwenden.
Erstellen der Komponente
Hinzufügen des HTML-Codes zur Anzeige eines "404"-Titels, einer einfachen Nachricht und eines "Zur Startseite"-Buttons:
not-found-conponent.html
not-found-conponent.css
Ein einfaches Layout mit einem besonderen Element — der Methode goToHome(). Beim Klicken des Buttons erfolgt eine Weiterleitung des Nutzers zur Startseite.
Wir haben außerdem etwas CSS hinzugefügt, um die 404-Seite optisch ansprechend zu gestalten — zentrierter Text, eine auffällige Überschrift und eine schlichte, helle Schaltfläche.
Hinzufügen der Navigationslogik
Nun wird die Methode implementiert, um den Benutzer zurück zur Startseite zu navigieren.
not-found-conponent.ts
Hier wird der Angular-Router injiziert, um manuell zwischen Routen zu navigieren. In der Methode goToHome() wird navigate(['/']) verwendet, um den Benutzer zur Root-Route weiterzuleiten.
Behandlung aller unbekannten Routen
Nun wird die Routing-Konfiguration der App so angepasst, dass der NotFoundComponent für alle nicht definierten Pfade angezeigt wird.
Fügen Sie in Ihrer Datei app.routes.ts die folgende Route ganz am Ende hinzu:
routes.ts
Der Pfad ** ist ein Platzhalter, der jede Route abfängt, die zuvor nicht übereinstimmt. Zum Beispiel wird beim Navigieren zu /wrong-url die 404-Seite angezeigt.
Warum sollte die Wildcard-Route immer zuletzt stehen?
In Angular wird die Routen-Konfiguration der Reihenfolge nach ausgewertet – von oben nach unten. Das bedeutet, dass der Router jede Route nacheinander prüft und bei einem Treffer die Suche beendet.
Die Wildcard-Route ({ path: '**' }) ist eine Auffangroute. Sie passt auf jeden Pfad, der von den vorherigen Routen nicht abgedeckt wurde. Wenn sie vor spezifischeren Routen platziert wird, fängt sie alles ab und die restlichen Routen werden nie erreicht – selbst wenn sie gültig sind.
Die Anwendung behandelt Navigationsfehler jetzt elegant: Anstatt abzustürzen oder einen leeren Bildschirm anzuzeigen, sehen Nutzer eine freundliche 404-Nachricht mit einer klaren Rückkehrmöglichkeit zur Startseite.
Die Anwendung ist nun vollständig funktionsfähig und benutzerfreundlich! 🎉 Um die vollständige Version dieses Projekts herunterzuladen, einfach auf den untenstehenden Button klicken.
Danke für Ihr Feedback!
