Parfois, les utilisateurs peuvent saisir une URL incorrecte manuellement ou cliquer sur un lien obsolète. Dans de tels cas, il est important d'afficher un message clair « Page non trouvée » au lieu d'un écran vide ou d'une erreur technique. Dans ce module, nous allons créer un composant de page 404, configurer nos routes pour l'afficher pour tous les chemins inconnus, et ajouter un style soigné.

Création du NotFoundComponent

Nous allons créer un nouveau composant Angular appelé NotFoundComponent qui servira de page 404. Il affichera un titre, un court message d'erreur et un bouton pour rediriger l'utilisateur vers la page d'accueil.

Exécutez la commande suivante pour générer le composant :

Cela créera automatiquement un dossier not-found avec quatre fichiers. Vous connaissez déjà ces fichiers, et vous pouvez supprimer le fichier de test si vous ne l'utilisez pas.

Création du composant

Ajout du code HTML pour afficher un titre "404", un message simple, et un bouton "Aller à l'accueil" :

Il s'agit d'une mise en page simple, avec un élément particulier — la méthode goToHome(). Lorsque l'utilisateur clique sur le bouton, il est redirigé vers la page d'accueil.

Ajout de la logique de navigation

Implémentation de la méthode permettant de rediriger l'utilisateur vers la page d'accueil.

Ici, nous injectons le Router d’Angular pour naviguer manuellement entre les routes. Dans la méthode goToHome(), nous utilisons navigate(['/']) pour rediriger l’utilisateur vers la route racine.

Gestion de toutes les routes inconnues

Nous allons maintenant mettre à jour la configuration de routage de l’application afin d’afficher le NotFoundComponent pour tout chemin non défini.

Dans votre fichier app.routes.ts, ajoutez la route suivante tout à la fin :

Le chemin ** est un caractère générique qui correspond à toute route ne correspondant pas aux précédentes. Par exemple, accéder à /wrong-url affichera la page 404.

Pourquoi la route générique doit-elle toujours être placée en dernier ?

Dans Angular, la configuration des routes est évaluée dans l'ordre — de haut en bas. Cela signifie que le routeur vérifie chaque route séquentiellement et, dès qu'il trouve une correspondance, il arrête la recherche.

La route générique ({ path: '**' }) est une route de rattrapage. Elle correspond à tout chemin qui n'a pas été trouvé par les routes précédentes. Si vous la placez avant des routes plus spécifiques, elle interceptera tout, et les autres routes ne seront jamais atteintes — même si elles sont valides.

Votre application gère désormais élégamment les erreurs de navigation : au lieu de planter ou d'afficher un écran vide, les utilisateurs voient un message 404 convivial avec un moyen clair de revenir à la page d'accueil.

Votre application est maintenant entièrement fonctionnelle et conviviale ! 🎉 Si vous souhaitez télécharger la version complète de ce projet, cliquez simplement sur le bouton ci-dessous.