No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Ruta 404

7/25
Recursos

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.

Qu茅 es componente 404

Es una buena pr谩ctica manipular las rutas no existentes creando un componente con un mensaje t铆pico de 鈥減谩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

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

https://http.cat esta api de imagenes de status http con gatos est谩 genial. Espero qje a alguien le guste jejeje

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;
}

En esta pagina pueden encontrar ilustraciones para sus proyectos

https://undraw.co/illustrations

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 {}