Implementación de página 404 personalizada en aplicaciones web

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 "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.