25

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?

cobolstinks
  • 6,801
  • 16
  • 68
  • 97

2 Answers2

42

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.

Huske
  • 9,186
  • 2
  • 36
  • 53
  • I have the imported the RouterModule into my main AppModule, then i imported some of my child Modules into my main AppModule as well. I thought that since i imported RouterModule at my AppModule level it would be usable everywhere. Is that not the case? – cobolstinks Sep 27 '16 at 23:57
  • 2
    @cobolstinks no, `declarations` are not inherited, this includes components, directives, and pipes. If you need to use any of these in a module, then you need to import the containing module into that module. That's just how it is. – Paul Samsotha Sep 28 '16 at 01:34
  • 2
    Ok thanks, It turns out i needed to define my module routes in their own routing configuration file and import that into each of the modules. It seems to work now. Thanks for sending me down the correct path. – cobolstinks Sep 28 '16 at 18:17
  • @cobolstinks you are welcome. :-) – Huske Sep 28 '16 at 18:19
  • Hi @cobolstinks, i'm having the same issue, can you elaborate on how you fixed it? – Kimmiekim Jun 23 '17 at 15:41
  • @Kimmiekim have a look at this link on angular.io https://angular.io/guide/router – Huske Jun 23 '17 at 15:53
  • 4
    I've been finding this error 1.000 times without the right solution. If you're using webpack. Angular breaks with this error in default production! This is due to the html-minifier in the html-loader, causing attributes to be cast to lowercase! add caseSensitive: true to the html-loader options see: github.com/SamanthaAdrichem/webpack-3.9.1-splitted-config-angular for a working angular 5 + webpack 3.9 config – Samantha Adrichem Dec 04 '17 at 17:38
3

Some of the syntax has changed since rc-4, especially if you were not using router 3.0.

Follow the RouterLink Section here.

https://angular.io/docs/ts/latest/guide/router.html

Few other things to check is the Configuration part that sets up the app.module.ts.

Hopefully this sets you in the right direction!

mrcolombo
  • 587
  • 4
  • 19