title: Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'
body: <p>I am creating a component then it's set to root component then i am getting error <code>Template parse errors: Can't bind to 'routerLink' since it isn't a known property of 'a'.</code> i have using RouterLink as a directive in component anotation but it can't work.</p>
  
  <p>app.routes.ts</p>
  
  <pre><code>import { ModuleWithProviders }  from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { dogRoutes }    from './Dogs/dog.routes';
  import { catRoutes }    from './Cats/cat.routes';
  import {userRoutes} from "./Users/user.routes";
  // Route Configuration
  export const routes: Routes = [
    {
      path: '',
      redirectTo: '/dogs',
      pathMatch: 'full'
    },
    ...catRoutes,
    ...dogRoutes,
    ...userRoutes
  ];
  
  export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `
    &lt;div class="demo-layout-transparent mdl-layout mdl-js-layout"&gt;
    &lt;header class="mdl-layout__header mdl-layout__header--transparent"&gt;
      &lt;div class="mdl-layout__header-row"&gt;
        &lt;!-- Title --&gt;
        &lt;span class="mdl-layout-title"&gt;Scotch Pets&lt;/span&gt;
        &lt;!-- Add spacer, to align navigation to the right --&gt;
        &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
        &lt;!-- Navigation with router directives--&gt;
        &lt;nav class="mdl-navigation"&gt;
          &lt;a class="mdl-navigation__link" [routerLink]="['/']"&gt;Home&lt;/a&gt;
          &lt;a class="mdl-navigation__link" [routerLink]="['/cats']"&gt;Cats&lt;/a&gt;
          &lt;a class="mdl-navigation__link" [routerLink]="['/dogs']"&gt;Dogs&lt;/a&gt;
          &lt;a class="mdl-navigation__link" [routerLink]="['/login']"&gt;Login&lt;/a&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;main class="mdl-layout__content"&gt;
      &lt;h1 class="header-text"&gt;We care about pets...&lt;/h1&gt;
    &lt;/main&gt;
  &lt;/div&gt;
  &lt;!-- Router Outlet --&gt;
  &lt;div class="container"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;/div&gt;
    `,
  
  })
  
  export class AppComponent{}
  </code></pre>
  
  <p>app.module.ts</p>
  
  <pre><code>import { NgModule }       from '@angular/core';
  import { BrowserModule }  from '@angular/platform-browser';
  import { FormsModule }    from '@angular/forms';
  import { HttpModule, JsonpModule } from '@angular/http';
  
  import { AppComponent }         from './app.component';
  import { DogsModule } from './Dogs/dogs.module';
  import { CatsModule } from './Cats/cats.module';
  import { UserModule }          from './Users/users.module';
  import {routing} from './app.routes';
  import {RouterModule} from "@angular/router";
  
  
  @NgModule({
    imports: [
      BrowserModule,
  FormsModule,
   HttpModule,
  RouterModule,
  JsonpModule,
  UserModule,
  DogsModule,
  CatsModule,
  routing
   ],
   declarations: [
    AppComponent,
   ],
   providers: [   ],
    bootstrap: [ AppComponent ]
  })
  
  export class AppModule {}
  </code></pre>
  
  <p>dog-list.component.ts</p>
  
  <pre><code> import {Component, OnInit} from '@angular/core';
  import {PetService} from '../services/pet.service'
  import {Observable} from 'rxjs/Observable';
  import {Pet} from '../model/pet';
  import {AuthenticationService} from "../../Users/services/authentication.service";
  
  
  @Component({
  
    template: `
      &lt;h2&gt;Dogs&lt;/h2&gt;
      &lt;p&gt;List of dogs&lt;/p&gt;
      &lt;ul class="demo-list-icon mdl-list"&gt;
        &lt;li class="mdl-list__item" *ngFor="let dog of dogs | async"&gt;
          &lt;span class="mdl-list__item-primary-content"&gt;
              &lt;i class="material-icons mdl-list__item-icon"&gt;pets&lt;/i&gt;
              &lt;a [routerLink]="['/dogs', dog.id.$t]"&gt;{{dog.name.$t}}&lt;/a&gt;
          &lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      `
  })
  // Component class implementing OnInit
  export class DogListComponent implements OnInit {
    // Private property for binding
    dogs: Observable&lt;Pet[]&gt;;
  
    constructor(private petService: PetService, private _service: AuthenticationService) {
  
    }
  
    // Load data ones componet is ready
    ngOnInit() {
      this._service.checkCredentials();
      // Pass retreived pets to the property
      this.dogs = this.petService.findPets('dog');
      alert(JSON.stringify(this.dogs))
    }
  }
  </code></pre>
  
  <p>Is there a better way for me to add fix this error?</p>