Gestión de Rutas Inexistentes en Angular
A veces, los usuarios pueden escribir una URL incorrecta manualmente o hacer clic en un enlace desactualizado. En estos casos, es importante mostrar un mensaje claro de "Página no encontrada" en lugar de una pantalla en blanco o un error técnico. En este módulo, se creará un componente de página 404, se configurarán las rutas para mostrarlo en todos los caminos desconocidos y se añadirá un estilo visual refinado.
Creación del NotFoundComponent
Se creará un nuevo componente de Angular llamado NotFoundComponent que servirá como página 404. Este mostrará un encabezado, un breve mensaje de error y un botón para redirigir al usuario a la página principal.
Ejecutar el siguiente comando para generar el componente:
Esto creará automáticamente una carpeta not-found con cuatro archivos. Estos archivos ya son conocidos, y se puede eliminar el archivo de prueba si no se utiliza.
Creación del componente
Agregar el HTML para mostrar un título "404", un mensaje sencillo y un botón "Ir a inicio":
not-found-conponent.html
not-found-conponent.css
Es una estructura sencilla, con una parte especial: el método goToHome(). Cuando se hace clic en el botón, el usuario es redirigido a la página de inicio.
También se ha añadido algo de CSS para que la página 404 sea visualmente atractiva: texto centrado, un encabezado destacado y un botón limpio y brillante.
Agregar la lógica de navegación
Ahora se implementará el método para redirigir al usuario a la página principal.
not-found-conponent.ts
Aquí, se inyecta el Router de Angular para navegar manualmente entre rutas. En el método goToHome(), se utiliza navigate(['/']) para enviar al usuario a la ruta raíz.
Manejo de Todas las Rutas Desconocidas
Ahora se actualizará la configuración de rutas de la aplicación para mostrar el NotFoundComponent en cualquier ruta no definida.
En el archivo app.routes.ts, agregue la siguiente ruta al final:
routes.ts
La ruta ** es un comodín que coincide con cualquier ruta que no coincida con las anteriores. Por ejemplo, al navegar a /wrong-url se mostrará la página 404.
¿Por qué la ruta comodín siempre debe ir al final?
En Angular, la configuración de rutas se evalúa en orden, de arriba hacia abajo. Esto significa que el enrutador verifica cada ruta de forma secuencial y, una vez que encuentra una coincidencia, deja de buscar.
La ruta comodín ({ path: '**' }) es una ruta de captura general. Coincide con cualquier ruta que no haya sido capturada por las rutas anteriores. Si la colocas antes que rutas más específicas, capturará todo y el resto de las rutas nunca serán alcanzadas, incluso si son válidas.
Ahora tu aplicación maneja los errores de navegación de forma elegante: en lugar de fallar o mostrar una pantalla en blanco, los usuarios ven un mensaje 404 amigable con una forma clara de volver a la página principal.
¡Tu aplicación ahora es completamente funcional y fácil de usar! 🎉 Si deseas descargar la versión completa de este proyecto, simplemente haz clic en el botón de abajo.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 3.13Gestión de Rutas Inexistentes en Angular
Desliza para mostrar el menú
A veces, los usuarios pueden escribir una URL incorrecta manualmente o hacer clic en un enlace desactualizado. En estos casos, es importante mostrar un mensaje claro de "Página no encontrada" en lugar de una pantalla en blanco o un error técnico. En este módulo, se creará un componente de página 404, se configurarán las rutas para mostrarlo en todos los caminos desconocidos y se añadirá un estilo visual refinado.
Creación del NotFoundComponent
Se creará un nuevo componente de Angular llamado NotFoundComponent que servirá como página 404. Este mostrará un encabezado, un breve mensaje de error y un botón para redirigir al usuario a la página principal.
Ejecutar el siguiente comando para generar el componente:
Esto creará automáticamente una carpeta not-found con cuatro archivos. Estos archivos ya son conocidos, y se puede eliminar el archivo de prueba si no se utiliza.
Creación del componente
Agregar el HTML para mostrar un título "404", un mensaje sencillo y un botón "Ir a inicio":
not-found-conponent.html
not-found-conponent.css
Es una estructura sencilla, con una parte especial: el método goToHome(). Cuando se hace clic en el botón, el usuario es redirigido a la página de inicio.
También se ha añadido algo de CSS para que la página 404 sea visualmente atractiva: texto centrado, un encabezado destacado y un botón limpio y brillante.
Agregar la lógica de navegación
Ahora se implementará el método para redirigir al usuario a la página principal.
not-found-conponent.ts
Aquí, se inyecta el Router de Angular para navegar manualmente entre rutas. En el método goToHome(), se utiliza navigate(['/']) para enviar al usuario a la ruta raíz.
Manejo de Todas las Rutas Desconocidas
Ahora se actualizará la configuración de rutas de la aplicación para mostrar el NotFoundComponent en cualquier ruta no definida.
En el archivo app.routes.ts, agregue la siguiente ruta al final:
routes.ts
La ruta ** es un comodín que coincide con cualquier ruta que no coincida con las anteriores. Por ejemplo, al navegar a /wrong-url se mostrará la página 404.
¿Por qué la ruta comodín siempre debe ir al final?
En Angular, la configuración de rutas se evalúa en orden, de arriba hacia abajo. Esto significa que el enrutador verifica cada ruta de forma secuencial y, una vez que encuentra una coincidencia, deja de buscar.
La ruta comodín ({ path: '**' }) es una ruta de captura general. Coincide con cualquier ruta que no haya sido capturada por las rutas anteriores. Si la colocas antes que rutas más específicas, capturará todo y el resto de las rutas nunca serán alcanzadas, incluso si son válidas.
Ahora tu aplicación maneja los errores de navegación de forma elegante: en lugar de fallar o mostrar una pantalla en blanco, los usuarios ven un mensaje 404 amigable con una forma clara de volver a la página principal.
¡Tu aplicación ahora es completamente funcional y fácil de usar! 🎉 Si deseas descargar la versión completa de este proyecto, simplemente haz clic en el botón de abajo.
¡Gracias por tus comentarios!
