Crear rutas en Angular 4

Aviso: Este tutorial ya no es necesario para las nuevas versiones ya que Angular-CLI crea el archivo de rutas actualmente.

Aprovechando que estoy empezando un nuevo proyecto en Angular 4 he decidido crear este mini-tutorial para enseñar cómo implementar rutas en Angular 4 (y quizá 5(?)).

Lo primero que hay que mencionar es que supongo en esta guía que ya tienes tu aplicación iniciada lista para implementar el sistema de rutas.

Si ya tenemos lista la aplicación, manos a la obra. Para empezar hay que crear un archivo llamado app.routes.ts en la carpeta app (donde encontramos el app.module.ts ) una vez creado este archivo hay que tener en cuenta que, por ejemplo, vamos a tener dos componentes, para ello ejecutamos el comando:

ng g component inicio para crear un componente llamado inicio y luego de nueva cuenta, ejecutamos el comando ng g component saludo para crear otro componente que “salude”, de esta forma podemos corroborar que funciona el sistema de rutas, claro como menciono, ya tenemos una app iniciada con un componente, pero vamos a ignorar este componente predefinido.

Como podremos ver creó 2 carpetas, una llamada inicio y otra saludo con varios archivos, en este caso no pondré atención a sus contenidos, por lo que únicamente vamos a agregar un link en cada uno con el formato:

<a [routerLink]="['/saludo']">Saludo</a> para el caso del componente inicio (esto iría dentro del archivo .html que se creó en la carpeta inicio), y duplicamos el código en el componente saludo, cambiando únicamente /saludo por /inicio y la frase Saludo por Inicio y listo, guardamos ambos y ya están vinculados por así decirlo.

Cabe destacar que es recomendable remover el selector del @Component() para dejar únicamente el templateUrl y el styles.

Dentro del archivo app.routes.ts vamos a importar lo siguiente:

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

Una vez hecho esto ya podemos trabajar importando ahora los componentes.

Para ello, hay que importar los componentes que creamos previamente con:

import { SaludoComponent } from './saludo/saludo.component';
import { InicioComponent } from './inicio/inicio.component';

Posterior vamos a crear ahora sí las rutas:

const APP_ROUTES: Routes = [
     { path: '', redirectTo: 'inicio', pathMatch: 'full' },     
     { path: 'inicio', component: InicioComponent },
     { path: 'saludo', component: SaludoComponent }
];

Y con esto ya estamos asignando las rutas que funcionarán quedando por ejemplo:

http://localhost:4200/saludo

Cabe destacar que la primer sección de rutas nos menciona que si no hay ruta seleccionada, nos redirige de forma automática a /inicio. Ahora solo falta agregar los módulos y exportar la clase, para ello incluimos lo siguiente:

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Primero creamos el módulo y luego exportamos la clase.

Para finalizar el sistema de rutas, hay que cargar en el app.module este nuevo módulo:

import { AppRoutingModule } from './app.routes';

Esto en la parte superior del archivo y luego dentro de los imports:

@NgModule({
     ...
     imports: [
          ...
          AppRoutingModule
          ...
     ]
     ...
});

Ya solo nos falta un paso, para ello hay que agregar una etiqueta en el archivo del app.component , para ello abrimos el archivo app.component.html e incluimos la siguiente etiqueta:

<router-outlet></router-outlet>

Ya con esto nuestro sistema de rutas quedará listo.