Linking from one component to another within an router-outlet in angular 2?

Question

How can I route from one component to another within an router-outlet in angular 2?

login.component.html

... login form ...
<a (click)="gotoSignup()">gotosignup</a>
<a routerlink="signup">singup</a>
<a routerlink="/signup">/singup</a>
<a routerlink="/signup/">singup</a>
<a routerlink="['signup']">[singup]</a>
<a routerlink="[/signup]">[/singup]</a>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, RequestOptions, Headers} from '@angular/http';
import { Router, ActivatedRoute } from '@angular/router';

export class LoginComponent implements OnInit {

    constructor(public router: Router) {}

    gotoSignup() {
      this.router.navigate(["signup"]);
    }

}

In the sample above gotosignup is working thereas the router Link is not working.

Trying to use <a [routerLink] ... ist not working eiter. It results in the following error:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'routerlink' since it isn't a known property of 'a'. ("
            <div class="well clearfix" style="font-size: larger;">
              <a [ERROR ->][routerlink]="['/signup']">

There are similar questions however they are not working for me. The seem to refer to pre alpa versions of angular 2 eg.:

• cant use [routerLink] inside the component < most similar

Answer 1

You need to add imports: [RouterModule] to the @NgModule() where your are using routerLink

It should be routerLink instead of routerlink.
Directive selectors are case sensitive (component templates in general are case sensitive)