Agregar rutas a una app Angular existente

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) 

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

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';

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

// src/app/app.module.ts
const routes: Routes = [];

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 {}

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>

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

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' },
]

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