Angular 2 new router api does not navigate to the page

[joshivis]

I am using Angular 2's new router and faced with strange behaviour while using the routing API in the code to navigate.

Package Versions : Angular Core = "2.0.0-rc.1" & Router = "3.0.0-alpha.5"

While using router in html as shown below, it works fine and the application navigates to the target when clicking on the link.

<a [routerLink]="['target']">

However, if I change above link to call a function (e.g. showTarget()) and use router api as shown below, it does not navigate to target.

showTarget() {
    let link = ['target'];
    this.router.navigate(link).then(
      function(){
          console.log('navigate success');
      },
      function(){
          console.log('navigate failure');
      }
    );
}

With above code, the console shows 'navigate success' but nothing happens on the screen. URL on the browser and the current page both stay unchanged.

I also tried navigating to some dummy link to see if it logs 'navigate failure' but it always shows 'success' no matter what link is specified.

    let link = ['target'];
    this.router.navigate(link).catch(err => console.error(err));
    link = ['non-existing-target'];
    this.router.navigate(link).then(
      function(){
          console.log('navigate success');
      },
      function(){
          console.log('navigate failure');
      }
    );

How do I debug what's causing this behaviour?