Ruta 404 en Angular 2

Publicado en Dic 21, 2016

Hoy vamos a ver como hacer una ruta 404 en Angular 2 para que cuando un usuario acceda a una url que no exista nos cargue un componente en especifico.

Imagina que tenemos un componente llamado NotFoundComponent y en el tenemos una plantilla asociada que muestra un 404 o el mensaje que quieras.

Para hacer que ese componente se cargue cuando la ruta no exista debemos añadir la siguiente ruta al array de rutas del app.routing.ts de nuestra webapp.

{path: '**', component: NotFoundComponent }

Nuestro fichero app.routing podria quedar así por ejemplo:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ProductosListComponent } from './components/productos-list.component';
import { ProductoDetailComponent } from './components/producto-detail.component';
import { NotFoundComponent } from './components/not-found.component';


const appRoutes: Routes = [
	{path: '', component: ProductosListComponent},
	{path: 'producto/:id', component: ProductoDetailComponent},
	{path: '**', component: NotFoundComponent }
];

export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

Ahora en el momento que introduzcamos una ruta que no exista nos cargará el componente NotFoundComponent.