Configurar rutas en Angular 2

Rutas en Angular2

En esta mini-entrada vamos a ver como poner correctamente las rutas en tu aplicación desarrollada con Angular2.

Lo he dividido en 3 pasos para que quede bastante detallado, aunque es realmente sencillo.

Para configurar las rutas primero vamos a suponer que tenemos dos nuevos componentes en tu aplicación web que queremos tener acceso mediante rutas.

Tus componentes nuevos son home.compontent.html y search.component.html
Y se encuentran en app/components/home y app/components/search respectivamente.

Vamos a ver los tres pasos que tienes que realizar.

Primer paso | Fichero app.routes.ts

Primero vamos a crear el fichero de configuración de rutas, para ello crearemos el fichero app.routes.ts dentro de la carpeta components

En este fichero vamos a importar y configurar las rutas, el código resultante sería algo así:

import { RouterModule, Routes } from '@angular/router';
 
import {HomeComponent} from './components/home/home.component';
import {SearchComponent} from './components/search/search.component';
 
const APP_ROUTES: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'search', component: SearchComponent },
  { path: '**', pathMatch: 'full', redirectTo: '' }
];
 
export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES, {useHash :true});

Cómo podéis ver en la última linea de código este módulo se llamará con la constante APP_ROUTING.

Segundo paso | Importar en app.modules.ts

Ahora abrimos el fichero app.modules.ts y vamos a importar APP_ROUTING.

Sería así, habría que importar APP_ROUTING y añadirlo a los Imports.

La linea 5 quedaría así:

import { APP_ROUTING } from ‘./app.routes’;

La linea 18 quedaría así:

Y en los Import añadiríamos lo siguiente
APP_ROUTING

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { SearchComponent } from './components/search/search.component';
import { NavbarComponent } from './components/common/navbar/navbar.component';
import { APP_ROUTING } from './app.routes';
 
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    SearchComponent,
    NavbarComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    APP_ROUTING
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tercer paso | Añadir ruoter

Ya solo queda un mini pasito, que es añadir en tu fichero de la aplicación la llamada a este componente.

Para eso en app.component.html le añadimos lo siguiente :

<router-outlet></router-outlet>

Y listo, con esto tendrías importadas las rutas para estos dos nuevos módulos en tu aplicación desarrollada con Angular2