Crear modulo de rutas (routerLink)

Crear un nuevo modulo para las rutas

Terminal >>  cmd >> ng generate module app-routing --flat --module=app

app-routing.module.ts:

import { NgModule } from '@angular/core';

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

import { EjemplosComponent } from './Ejemplos/Ejemplos.component';

import { Error404Component } from './error404/error404.component';

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

//crear una const Routes llamada routes para asignar el path de nuestros componentes

const routes: Routes = [

  { path: 'inicio', component: InicioComponent },

  { path: 'ejemplo', component: EjemplosComponent },

    //pagina por defecto cuando no se le asigna una ruta

  { path: '', pathMatch: 'full', redirectTo: 'inicio' },

//pagina por defecto cuando la pagina no existe

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

];

@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]

})

export class AppRoutingModule { }

app.module.ts:

  imports: [

    BrowserModule,

    AppRoutingModule

  ],

app.component.html:

<router-outlet></router-outlet>

Enlace de navegación:

<nav> <a routerLink="/ejemplo">Heroes</a> </nav>