Manejo de rutas
Qué aprenderás sobre Angular Router y programación modular
Creando rutas
Creando el Home
Página de categorías
Evitando doble subscribe
RouterLink y RouterActive
Ruta 404
Detalle de cada producto
Parametros URL
Módulos
LazyLoading y CodeSplitting
Programación Modular
Vistas anidadas
Creando el CMS Module
Creando en Website Module
Creando un Shared Module
Precarga de módulos
Precarga de módulos
All Modules y Custom Strategy
QuickLink Strategy
Guardianes
Conoce a los Guardianes
Implementando redirects
Estado de login
Guard para Admin
CanDeactivate
Deployment
Netlify Deployment
Despedida
Despedida
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Puede ocurrir en tu aplicación que el usuario ingrese a una ruta que no exista. Ya sea por un error de programación o un error manual de que el usuario ingrese una ruta que no esté definida.
Es una buena práctica manipular las rutas no existentes creando un componente con un mensaje típico de “página no encontrada” o similar.
Para esto, define una ruta con un doble asterisco que le indica a Angular que renderice un componente siempre que la ruta no exista.
// app-routing.module.ts
import { NotFoundComponent } from './components/not-found/not-found.component';
const routes: Routes = [
{
path: 'about',
component: AboutComponent
},
{
path: 'catalogo',
component: CatalogoComponent
},
{
path: 'home',
component: HomeComponent
},
{
path: '**',
component: NotFoundComponent // 404
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Es muy importante que esta regla para manejo de rutas no definidas se encuentre ubicado en el último lugar del array. Angular analiza las rutas en el mismo orden en que las defines. Si esta regla se encuentra en primer lugar, puede anular las demás y darte algunos problemas.
Contribución creada por: Kevin Fiorentino.
Aportes 17
Preguntas 3
Para los que quieren ir rápido:
gif
<div>
<img src="https://media.giphy.com/media/A9EcBzd6t8DZe/giphy.gif">
</div>
div {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
Me gustó este Not Found
Lo deje tal cual solo ajuste un poco el css para centrar el error y que se vea bien en mobile tambien
div{
position: relative;
width: 100%;
height: calc(100vh - 85px);
display: flex;
align-items: center;
justify-content: center;
}
img{
max-width: 90%;
}
Ya había hecho este 404 desde hace unos días. No es exactamente divertido, pero creo que me quedó lindo y útil.
Les comparto esta imagen por si quieren que el componente de NotFound quede un poco más bonito:
Descargar
Aqui les dejo un estilo un poquito modificado para que se vea mas bonito, solo agregue un margin-top para que se mire mas centrado:
div {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
margin-top: 150px;
}
He aqui mi aporte a la creatividad xd
{
path: '**', //** = QUE NO ESCUENTA NINGUNA RUTA
component:NotFoundComponent
}
Recuerden que pueden hacer una redireccion a home
import { Component } from '@angular/core';
@Component({
selector: 'app-not-found',
template: `
<style>
div{
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 120px);
}
</style>
<div>
<img src="https://media.giphy.com/media/A9EcBzd6t8DZe/giphy.gif">
</div>`
})
export class NotFoundComponent {}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.