A volte gli utenti possono digitare manualmente un URL errato o cliccare su un link obsoleto. In questi casi, è importante mostrare un chiaro messaggio di "Pagina non trovata" invece di una schermata vuota o di un errore tecnico. In questo modulo, verrà creato un componente 404 page, configurando le rotte per visualizzarlo per tutti i percorsi sconosciuti e aggiungendo uno stile curato.

Creazione del NotFoundComponent

Verrà creato un nuovo componente Angular chiamato NotFoundComponent che fungerà da pagina 404. Visualizzerà un titolo, un breve messaggio di errore e un pulsante per reindirizzare l'utente alla homepage.

Eseguire il seguente comando per generare il componente:

Questo comando creerà automaticamente una cartella not-found con quattro file. Questi file sono già noti e si può procedere a eliminare il file di test se non viene utilizzato.

Creazione del Componente

Aggiunta del codice HTML per mostrare un titolo "404", un messaggio semplice e un pulsante "Vai alla Home":

Si tratta di un layout semplice, con una parte particolare: il metodo goToHome(). Quando si clicca sul pulsante, l'utente viene reindirizzato alla pagina principale.

Aggiunta della logica di navigazione

Ora implementiamo il metodo per riportare l'utente alla pagina principale.

Qui, viene iniettato il Router di Angular per navigare manualmente tra le rotte. Nel metodo goToHome(), viene utilizzato navigate(['/']) per indirizzare l'utente alla rotta principale.

Gestione di tutte le rotte sconosciute

Ora verrà aggiornata la configurazione di routing dell'applicazione per mostrare il NotFoundComponent per qualsiasi percorso non definito.

Nel file app.routes.ts, aggiungere la seguente rotta alla fine:

Il percorso ** è un carattere jolly che corrisponde a qualsiasi rotta che non corrisponde a quelle precedenti. Ad esempio, navigando su /wrong-url verrà visualizzata la pagina 404.

Perché la rotta jolly dovrebbe sempre essere l'ultima?

In Angular, la configurazione delle rotte viene valutata in ordine, dall'alto verso il basso. Questo significa che il router controlla ogni rotta in sequenza e, una volta trovata una corrispondenza, interrompe la ricerca.

La rotta jolly ({ path: '**' }) è una rotta di cattura generale. Corrisponde a qualsiasi percorso che non sia stato intercettato dalle rotte precedenti. Se la posizioni prima di rotte più specifiche, intercetterà tutto e le altre rotte non verranno mai raggiunte, anche se valide.

Ora la tua applicazione gestisce correttamente gli errori di navigazione: invece di andare in crash o mostrare una schermata vuota, gli utenti vedranno un messaggio 404 chiaro e un modo semplice per tornare alla homepage.

La tua applicazione è ora completamente funzionale e facile da usare! 🎉 Se desideri scaricare la versione completa di questo progetto, clicca semplicemente sul pulsante qui sotto.