Problem with routerLink directive

Question

I am writing an Angular2 application that includes some routing using a component router.

Today I am using angular -2.0.0-beta.3.

and in the child component I'm trying to use the routerlink directive with the following pattern:

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

Instead, what happens is:

<a>Go Home</a>

without any exception, leaving it as an invalid anchor.

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

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 looks like I'm missing the angular2 -polyfills.js dependency . I'm not sure why this is necessary, but apparently it affects a few things, including the way links are displayed.

Answer 2

The as syntax you use was deprecated a while ago and renamed to name

This is how I define my routes.

  @RouteConfig([ new Route({ path: '/spreadsheet', component: Spreadsheet, name: 'Spreadsheet' }) ]) <a [routerLink]="['/Spreadsheet']">Virtualized Spreadsheet</a> 

Further information here: http://www.syntaxsuccess.com/viewarticle/routing-in-angular-2.0