Rendering error with angular router 2

Question

I’m studying Angular 2 and I came across a problem in the application I’m doing as a study. I decided to create a Coremodule and in it create a Sidebar(menu) component with the links for navigation of the application, however it did not work as expected.

The sidebar is rendered but the links are missing rendering href, which makes navigation impossible:

<a _ngcontent-aap-3="" routerlink="/dashboard" routerlinkactive="active">Dashboard</a>

I’ll leave my code to follow, someone would tell me what I’m doing wrong?

app/core/sidebar/sidebar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
}

app/core/sidebar/sidebar.component.html

<div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
        <li><a routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
        <li><a routerLink="/clientes" routerLinkActive="active">Clientes</a></li>
    </ul>
</div>

app/core/core.module.ts

import { NgModule, Optional, SkipSelf } from '@angular/core';

import { SidebarComponent } from './sidebar/sidebar.component';

@NgModule({
  imports: [],
  exports: [SidebarComponent],
  declarations: [SidebarComponent],
  providers: []
})
export class CoreModule {
  constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }
}

app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule, JsonpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from './core/core.module';
import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    CoreModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
}

app/app.component.html

<div class="container-fluid">
    <div class="row">
        <app-sidebar></app-sidebar>
        <div class="col-sm-9 offset-sm-3 col-md-10 offset-md-2 main">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

app/app-routing.module.ts

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

import { DashboardComponent } from './dashboard/dashboard.component';

@NgModule({
    imports: [
        RouterModule.forRoot([
            {
                path: '',
                redirectTo: '/dashboard',
                pathMatch: 'full'
            },
            {
                path: '**',
                redirectTo: '/dashboard',
                pathMatch: 'full'
            },
            { path: 'dashboard', component: DashboardComponent }
        ])
    ],
    exports: [
        RouterModule
    ],
    declarations: [],
    providers: [],
})
export class AppRoutingModule { }