issue with angular2 routing

Question

i have an issue using Angular2 routings , i build an application with three buttons , each button takes me to a specific route. This is my app-routing.module page :

/***** importation Components****/
import {NgModule} from '@angular/core';

import {DashboardComponent} from './dashboard/dashboard.component';
import {PlayersComponent} from './players/players.component';
import {PlayerDetailsComponent} from './player-details/player-details.component';
import {RouterModule,Routes} from '@angular/router';

const routes : Routes=[
{ path : '',redirectTo:'dashboard',pathMatch: 'full'},
{ path: 'dashboard',component:DashboardComponent},
{ path: 'players',component:PlayersComponent},
{ path: 'detail/:id',component:PlayerDetailsComponent}

] ;

@NgModule({
	  imports: [ RouterModule.forRoot(routes) ],
  	  exports: [ RouterModule ]
	
})
export class AppRoutingModule {}

This is my app.component.html page that containes the buttons :

<ul class="nav nav-pills nav-justified" >
   <li class="element" role="presentation"  ><a  routerLink="/dashboard" routerLinkActive="active">Dashboard</a></li>
  <li class="element" role="presentation" ><a  routerLink="/players" routerLinkActive="active">Players</a></li>
  <li class="element" role="presentation" ><a  href="test">Statistics</a></li>
</ul>
<router-outlet></router-outlet>

My app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
/***********Importation Components********************/
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { PlayersComponent } from './players/players.component';
import { PlayerDetailsComponent } from './player-details/player-details.component';

/*****Importaion Service*******************************/
import {PlayerService} from './player.service';
/**** Importation fichier routing**************/
import {AppRoutingModule} from './app-routing.module';

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

and when i click a button it dosen't take me to component i want , On the other hand if i type the path in adress bar it take me to the component adequate . i guess my routing version is this :

"scripts": {},
  "typings": "./router.d.ts",
  "version": "4.1.3"
}

EDIT : i found out that after removing recent updates i have done the routing starts working again. Those are my 2 pages i have updated. dashboard.component.html

import { Component, OnInit } from '@angular/core';
import {Player} from '../player';
import {PlayerService} from '../player.service';
import {Router} from '@angular/router';
@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  players : Player[] = [];
 bestPlayer:Player;
 data:Player[];
 
max:number =0;
  constructor(private playerService : PlayerService ,private router: Router) { }
 

 
  ngOnInit() { 

  	this.playerService.getPlayers()
  	.then(players=> this.players = players);
    this.data=this.playerService.getDatas();
  for (var i = 0; i <= this.data.length; i++) {
    if (this.data[i].likes>this.max) {
      this.max=this.data[i].likes;
      this.bestPlayer=this.data[i];
      
     } 
  }
 
    }
    viewDetails(bestPlayer: Player):void{
      this.router.navigate(['/detail',this.bestPlayer.id]);

    }



}

<div class="container well-sm bloc" >
	<div class="row"><h1 style="font-family: 'Lobster', cursive;color: white"><span class="glyphicon glyphicon-star" style="color: #FFC153"></span> Player of the week is </h1> </div>
	<div >
	<h2>{{bestPlayer.name}} <span class="badge badge1">{{bestPlayer.number}}</span></h2>
	<h2>with : {{max}} Likes <span class="glyphicon glyphicon-heart " style="color: red"></span></h2>
	<br><button class="btn btn-success" (click)="viewDetails(bestPlayer)">View player details</button>
	</div>
	
</div>

Answer 1

I found out that an issue in my dashboard.component.ts is causing the problem. i wrote a function that get and show the "best player" in my array of objects (the player who has more likes). this is what the function looks like

 ngOnInit() { 

  	this.playerService.getPlayers()
  	.then(players=> this.players = players);
    this.data=this.playerService.getDatas();
  for (var i = 0; i <= this.data.length; i++) {
    if (this.data[i].likes>this.max) {
      this.max=this.data[i].likes;
      this.bestPlayer=this.data[i];
      
     } 
  }
 
    }
    viewDetails(bestPlayer: Player):void{
      this.router.navigate(['/detail',this.bestPlayer.id]);

    }

when i run the app the browser show me an error function in the console "this.data[i] is undefined" but the app runs anyway. when i delete this the router starts working again

Answer 2

try with:

In app.component.html

<a [routerLink]="['dashboard']">Dashboard</a>
<a [routerLink]="['players']">Players</a>
<router-outlet></router-outlet>

router config

const routes : Routes=[
{ path : '',redirectTo:'dashboard',pathMatch: 'full'},
{ path: 'dashboard',component:DashboardComponent},
{ path: 'players',component:PlayersComponent},
{ path: 'detail/:id',component:PlayerDetailsComponent}

] ;

@NgModule({
      imports: [ RouterModule.forRoot(routes) ],
      exports: [ RouterModule ]

})
export class AppRoutingModule {}

import {AppRoutingModule} from './app-routing.module';

@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    PlayersComponent,
    PlayerDetailsComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    HttpModule,

  ],
  providers: [PlayerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Be careful: you can only call RouterModule.forRoot() once. It seems that you have to calls of this function in your app