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 wird eine 404-Seite-Komponente erstellt, die Routen werden so konfiguriert, dass sie diese Komponente für alle unbekannten Pfade anzeigen, und es wird ein ansprechendes Styling hinzugefügt.
Erstellen der NotFoundComponent
Eine neue Angular-Komponente mit dem Namen NotFoundComponent wird erstellt, die als 404-Seite dient. Sie zeigt eine Überschrift, eine kurze Fehlermeldung und eine Schaltfläche zur Weiterleitung des Benutzers zur Startseite an.
Führen Sie den folgenden Befehl aus, um die Komponente zu generieren:
Dadurch wird automatisch ein not-found-Ordner mit vier Dateien erstellt. Diese Dateien sind bereits bekannt und die Testdatei kann gelöscht werden, falls sie nicht verwendet wird.
Erstellen der Komponente
Hinzufügen des HTML zur Anzeige eines "404"-Titels, einer einfachen Nachricht und einer "Zur Startseite"-Schaltfläche:
not-found-conponent.html
not-found-conponent.css
Ein einfaches Layout mit einem besonderen Teil — der Methode goToHome(). Beim Klicken auf die Schaltfläche wird der Benutzer zur Startseite weitergeleitet.
Es wurde zusätzlich 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 zu leiten.
Behandlung aller unbekannten Routen
Nun wird die Routing-Konfiguration der Anwendung 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 übereingestimmt hat. 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 verarbeitet Navigationsfehler jetzt elegant: Anstatt abzustürzen oder einen leeren Bildschirm anzuzeigen, sehen Nutzer eine freundliche 404-Meldung 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 wird eine 404-Seite-Komponente erstellt, die Routen werden so konfiguriert, dass sie diese Komponente für alle unbekannten Pfade anzeigen, und es wird ein ansprechendes Styling hinzugefügt.
Erstellen der NotFoundComponent
Eine neue Angular-Komponente mit dem Namen NotFoundComponent wird erstellt, die als 404-Seite dient. Sie zeigt eine Überschrift, eine kurze Fehlermeldung und eine Schaltfläche zur Weiterleitung des Benutzers zur Startseite an.
Führen Sie den folgenden Befehl aus, um die Komponente zu generieren:
Dadurch wird automatisch ein not-found-Ordner mit vier Dateien erstellt. Diese Dateien sind bereits bekannt und die Testdatei kann gelöscht werden, falls sie nicht verwendet wird.
Erstellen der Komponente
Hinzufügen des HTML zur Anzeige eines "404"-Titels, einer einfachen Nachricht und einer "Zur Startseite"-Schaltfläche:
not-found-conponent.html
not-found-conponent.css
Ein einfaches Layout mit einem besonderen Teil — der Methode goToHome(). Beim Klicken auf die Schaltfläche wird der Benutzer zur Startseite weitergeleitet.
Es wurde zusätzlich 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 zu leiten.
Behandlung aller unbekannten Routen
Nun wird die Routing-Konfiguration der Anwendung 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 übereingestimmt hat. 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 verarbeitet Navigationsfehler jetzt elegant: Anstatt abzustürzen oder einen leeren Bildschirm anzuzeigen, sehen Nutzer eine freundliche 404-Meldung 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!
