Soms voeren gebruikers handmatig een onjuiste URL in of klikken ze op een verouderde link. In dergelijke gevallen is het belangrijk om een duidelijke "Pagina niet gevonden"-melding te tonen in plaats van een leeg scherm of een technische foutmelding. In deze module maken we een 404-pagina-component, configureren we onze routes om deze weer te geven voor alle onbekende paden en voegen we een verzorgde opmaak toe.

NotFoundComponent aanmaken

We maken een nieuwe Angular-component genaamd NotFoundComponent die zal dienen als onze 404-pagina. Deze toont een koptekst, een korte foutmelding en een knop om de gebruiker terug te leiden naar de homepage.

Voer het volgende commando uit om de component te genereren:

Hierdoor wordt automatisch een map not-found aangemaakt met vier bestanden. Je bent al bekend met deze bestanden en je kunt het testbestand verwijderen als je dit niet gebruikt.

Component bouwen

HTML toevoegen voor het weergeven van een "404"-titel, een eenvoudige boodschap en een "Ga naar Home"-knop:

Eenvoudige lay-out met één bijzonder onderdeel — de goToHome()-methode. Bij het klikken op de knop wordt de gebruiker doorgestuurd naar de homepage.

Navigatielogica toevoegen

Nu wordt de methode geïmplementeerd om de gebruiker terug naar de startpagina te navigeren.

Hier wordt Angular's Router geïnjecteerd om handmatig tussen routes te navigeren. In de methode goToHome() gebruiken we navigate(['/']) om de gebruiker naar de rootroute te sturen.

Afhandelen van alle onbekende routes

Nu werken we de routeringsconfiguratie van de app bij om de NotFoundComponent te tonen voor alle niet-gedefinieerde paden.

Voeg in je app.routes.ts-bestand de volgende route helemaal onderaan toe:

Het ** pad is een wildcard die elke route matcht die niet eerder is gematcht. Bijvoorbeeld, navigeren naar /wrong-url toont de 404-pagina.

Waarom Moet de Wildcardroute Altijd Laatst Staan?

In Angular wordt de routeringsconfiguratie in volgorde geëvalueerd—van boven naar beneden. Dit betekent dat de router elke route achtereenvolgens controleert en zodra er een match is gevonden, stopt het zoeken.

De wildcardroute ({ path: '**' }) is een vangnetroute. Deze matcht elk pad dat niet door de voorgaande routes is gematcht. Als je deze vóór specifiekere routes plaatst, zal deze alles opvangen en worden de overige routes nooit bereikt—zelfs als ze geldig zijn.

Nu verwerkt je app navigatiefouten op een nette manier: in plaats van te crashen of een leeg scherm te tonen, zien gebruikers een duidelijke 404-melding met een duidelijke weg terug naar de homepage.

Je app is nu volledig functioneel en gebruiksvriendelijk! 🎉 Wil je de volledige versie van dit project downloaden? Klik dan op de onderstaande knop.