Issue with routerLink directive

Question

I'm writing an Angular2 app that includes some routing with the component router.

As of today, I'm using angular-2.0.0-beta.3.

while in a child component, I try to use the routerlink directive with the following template:

<a [routerLink]=['/Home']>Go Home</a>.

Instead, what's getting rendered is:

<a>Go Home</a>

with no exception thrown whatsoever, leaving it as an invalid anchor.

It's important to note that router.navigate(['Home']) is working as expected.

app.component.ts:

@Component({
    selector: 'app',
    providers: [WrapperService],
    template: '<router-outlet></router-outlet>',
    directives: [ROUTER_DIRECTIVES]
})
   @RouteConfig([
    { path: '/home', as: 'Home', component: HomeComponent, useAsDefault: true }
])
export class AppComponent {
    constructor() { }
}

home.component.ts

@Component({
    selector: 'home',
    template: '<a [routerLink]="['/Home']">Go home</a>',
    directives: [ROUTER_DIRECTIVES]
})
export class HomeComponent {
    constructor() { }
}

Actually, these files should only show a working link to...the current page (for simplicity).

What is missing here?

Answer 1

Well, it seems that I was missing the angular2-polyfills.js dependency. I'm not sure why it is needed, but apparently, it affects several things, among them is the way links are rendered.

Answer 2

The as syntax you are using was deprecated a while back and renamed to name

Here is how I define my routes.

 @RouteConfig([
   new Route({ path: '/spreadsheet', component: Spreadsheet, name: 'Spreadsheet' })
 ])

<a [routerLink]="['/Spreadsheet']">Virtualized Spreadsheet</a>

More info here: http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0