DEV Community

loading...
Cover image for Agregar rutas a una app Angular existente

Agregar rutas a una app Angular existente

facurodriguez profile image Facundo Rodriguez Updated on ・2 min read

Al momento de crear por primera vez una aplicación Angular utilizando el Angular CLI con el comando ng new se nos da la posibilidad de agregar las rutas:

? Would you like to add Angular routing? (y/N) 
Enter fullscreen mode Exit fullscreen mode

Es posible que al principio no querramos enfocarnos en el ruteo por lo tanto seleccionamos que no.

Entonces, qué sucede si en el futuro queremos agregar las rutas? No tenemos un comando específico en el CLI que nos permita generarlas por lo que ahora veremos como hacerlo nosotros mismos.

Crear las rutas

Si queremos, podemos crear nuestras rutas dentro de un módulo y utilizarlo únicamente para la definición de las rutas. Esto se puede hacer creando el módulo app-routing utilizando siguiente comando del CLI:

ng generate module app-routing --flat --module=app
Enter fullscreen mode Exit fullscreen mode

La opción flat evita que se cree una nueva carpeta para el nuevo módulo y la opción module nos permite indicar que nuevo módulo debe ser importado en el AppModule.

Otra opción disponible es mantener las rutas junto con el mismo módulo en donde aplican.

Para hacer esto, en app.module.ts debemos importar dos elementos del módulo de rutas de Angular:

// src/app/app.module.ts
import { RouterModule, Routes } from '@angular/router';
Enter fullscreen mode Exit fullscreen mode

Luego, necesitamos crear un array que eventualmente contendrá la definición de nuestras rutas:

// src/app/app.module.ts
const routes: Routes = [];
Enter fullscreen mode Exit fullscreen mode

Por último, en el decorador NgModule debemos agregar el módulo de rutas de Angular a la lista de módulos importados:

// src/app/app.module.ts
@NgModule({
  imports: [BrowserModule, RouterModule.forRoot(routes)],
  declarations: [AppComponent, HomeComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

Mostrar las rutas

Posterior a la creación de las rutas, necesitamos una forma de mostrar el contenido de la ruta a la cual queremos acceder. Para esto utilizamos un componente dentro del módulo de rutas de Angular llamado router-outlet de la siguiente forma:

<!-- src/app/app.component.ts -->
<router-outlet></router-outlet>
Enter fullscreen mode Exit fullscreen mode

Para corroborar que esto funciona vamos a crear nuestra primer ruta. Primero, creemos nuestro primer componente con el siguiente comando del CLI:

ng generate component home
Enter fullscreen mode Exit fullscreen mode

Luego, agregamos la nueva ruta hacia el componente home y una ruta de respaldo en caso de que se ingrese una ruta no definida:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '**', redirectTo: 'home' },
]
Enter fullscreen mode Exit fullscreen mode

Al ejecutar el comando ng serve deberías ser capaz de ver la ruta home en el browser.

Aquí se puede ver el código final:

Stackblitz

Discussion

pic
Editor guide