angular – 模板解析错误：无法绑定到’routerLink’,因为它不是

app.routes.ts

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);

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',template: `
  <div class="demo-layout-transparent mdl-layout mdl-js-layout">
  <header class="mdl-layout__header mdl-layout__header--transparent">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">Scotch Pets</span>
      <!-- Add spacer,to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
      <!-- Navigation with router directives-->
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" [routerLink]="['/']">Home</a>
        <a class="mdl-navigation__link" [routerLink]="['/cats']">Cats</a>
        <a class="mdl-navigation__link" [routerLink]="['/dogs']">Dogs</a>
        <a class="mdl-navigation__link" [routerLink]="['/login']">Login</a>
      </nav>
    </div>
  </header>
  <main class="mdl-layout__content">
    <h1 class="header-text">We care about pets...</h1>
  </main>
</div>
<!-- Router Outlet -->
<div class="container">
  <router-outlet></router-outlet>
    </div>
  `,})

export class AppComponent{}

app.module.ts

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 {}

狗list.component.ts

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: `
    <h2>Dogs</h2>
    <p>List of dogs</p>
    <ul class="demo-list-icon mdl-list">
      <li class="mdl-list__item" *ngFor="let dog of dogs | async">
        <span class="mdl-list__item-primary-content">
            <i class="material-icons mdl-list__item-icon">pets</i>
            <a [routerLink]="['/dogs',dog.id.$t]">{{dog.name.$t}}</a>
        </span>
      </li>
    </ul>
    `
})
// Component class implementing OnInit
export class DogListComponent implements OnInit {
  // Private property for binding
  dogs: Observable<Pet[]>;

  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))
  }
}

有没有更好的方法来添加修复此错误？