Can't bind to 'routerLink' since it isn't a known property of 'a' [duplicate]

Question

I'm updating one of our apps from rc4 to angular2.0.0 and I'm getting a template parse error at run time. Here is my view template:

<div *ngFor="let widget of widgets" class="col-xs-3 quick-link">     <a [routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">         <div class="tile-icon">             <span [className]="widget.IconCssClass"></span>             <span *ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}</span>         </div>         <h4>{{widget.Text}}</h4>     </a> </div> 

And the error is on the routerlink. Here's the error:

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("      <div *ngFor="let widget of widgets" class="col-xs-3 quick-link">         <a [ERROR ->][routerLink]="['/Tile', widget.WidgetRoute.Feature, widget.WidgetRoute.SubFeature]">             <di"): LdrComponent@4:19 Can't bind to 'ngIf' since it isn't a known property of 'span'. ("tile-icon">                 <span [className]="widget.IconCssClass"></span>                 <span [ERROR ->]*ngIf="widget.BadgeNumber > 0" class="badge">{{widget.BadgeNumber}}</span>             </div>      "): LdrComponent@7:22 

The routerLink doesn't seem malformed to me... What did I do wrong?

Answer 1

The problem is that you forgot to add RouterModule to your NgModule component. In the RC this was added to the @Component({directives: [ROUTER_DIRECTIVES]}), however, this is now moved into @NgModule({ imports: [RouterModule]}).

When you define your routes, one of the components that you will import will be the RouterModule that you will use to call forRoot or forChild. When you import the route, this will be imported automatically.

So, you will get the RouterLink either this way, or via direct import into imports property of @NgModule.