取得 'routerLink'にバインドできません。 'a'の既知のプロパティではないためです。エラーが発生しました

Question

私はAngle 4アプリケーションで基本ルーティングを実装しており、ブラウザにアプリケーションをロードする際に次のエラーが発生します。私はapproating.moduleの経路を定義しているので、Ngmoduleのrouterモジュールとapprouting.moduleも参照しています。わからない問題は、以下

Can't bind to 'routerLink' since it isn't a known property of 'a'. 

Can't bind to 'routerLink' since it isn't a known property of 'a'. ("ew" [hidden]="!dataItem.isVisibleView"> 
                 <a [ERROR ->][routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-fil"): ng:///MovieModule/MovieComponent.html@85:59 
Can't bind to 'routerLink' since it isn't a known property of 'a'. ("it" [hidden]="!dataItem.isVisibleEdit"> 
                 <a [ERROR ->][routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidd"): ng:///MovieModule/MovieComponent.html@92:59 

はmovie.component.htmlで自分のアプリケーション剣道グリッドの

スニペットのソースコード

</kendo-grid-column> 
              <kendo-grid-column title="View" headerClass="kendoGridHeader" class="kendoGridControlCell"> 
               <ng-template kendoGridCellTemplate let-dataItem> 
                <span data-title="View" [hidden]="!dataItem.isVisibleView"> 
                 <a [routerLink]="['/view', dataItem.movieId, 'responses']" routerLinkActive="active"><i class="fa fa-file-text" aria-hidden="true"></i></a> 
                </span> 
               </ng-template> 
              </kendo-grid-column> 
              <kendo-grid-column title="Edit" headerClass="kendoGridHeader" class="kendoGridControlCell"> 
               <ng-template kendoGridCellTemplate let-dataItem> 
                <span data-title="Edit" [hidden]="!dataItem.isVisibleEdit"> 
                 <a [routerLink]="['edit', dataItem.movieId]" routerLinkActive="active"><i class="fa fa-pencil" aria-hidden="true"></i></a> 
                </span> 
               </ng-template> 
              </kendo-grid-column> 
              <kendo-grid-column title="Delete" headerClass="kendoGridHeader" class="kendoGridControlCell"> 
               <ng-template kendoGridCellTemplate let-dataItem> 
                <span data-title="Delete" [hidden]="!dataItem.isVisibleDelete"> 
                 <a data-toggle="dropdown" class="dropdown-toggle" href=""> 
                  <i class="fa fa-times" aria-hidden="true"></i> 
                 </a> 
                 <ul class="dropdown-menu table-popup-delete"> 
                  <li>Are you sure you want to delete this?</li> 
                  <br> 
                  <li><button class="button" (click)="deleteWorkflow(dataItem.movieId)" style="width:100%;">Delete</button></li> 
                  <br> 
                  <li><button class="button" style="width:100%;">Cancel</button></li> 
                 </ul> 
                </span> 
               </ng-template> 
              </kendo-grid-column> 

approuting.module何されています。 ts

import {NgModule} from '@angular/core'; 
import {Routes,RouterModule} from '@angular/router'; 
import {MovieComponent} from './movie/movie.component'; 
import {HomeComponent} from '../app/home/home.component'; 
import {NotFoundComponent} from './not-found/not-found.component'; 
import {NewmovieComponent} from './movie/new/newmovie.component'; 
import {EditmovieComponent} from './movie/edit/editmovie.component'; 
import {ViewmovieComponent} from './movie/view/viewmovie.component'; 

export const routes: Routes = [ 
{path : '', component : HomeComponent}, 
{path: 'movie', component : MovieComponent}, 
{path : 'new' , component : NewmovieComponent }, 
{path : 'edit' , component : EditmovieComponent }, 
{path : 'view' , component : ViewmovieComponent }, 
{path: '**',component : NotFoundComponent} 

]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes,{useHash: true})], 
    exports: [RouterModule] 

}) 

export class AppRoutingModule{} 

app.module

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import {FormsModule} from '@angular/forms'; 
import {HttpModule} from '@angular/http'; 
import { RouterModule } from '@angular/router'; 
import { AppComponent } from './app.component'; 
import { NavbarComponent } from './navbar/navbar.component'; 
import { TopbarComponent } from './topbar/topbar.component'; 
import { FooterbarComponent } from './footerbar/footerbar.component'; 
import { MRDBGlobalConstants } from './shared/mrdb.global.constants'; 
import {AppRoutingModule} from './approuting.module'; 
import {HomeModule} from './home/home.module'; 
import {MovieModule} from './movie/movie.module'; 
import { MRDBCommonService } from './shared/services/mrdb.common.service'; 
import { NotFoundComponent } from './not-found/not-found.component'; 
import { SharedModule } from './shared/shared.module'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    FooterbarComponent, 
    TopbarComponent, 
    NavbarComponent, 
    NotFoundComponent 
    ], 
    imports: [ 
    AppRoutingModule, 
    HomeModule, 
    MovieModule, 
    BrowserModule, 
    HttpModule, 
    SharedModule 

    ], 
    providers: [MRDBGlobalConstants, 
       MRDBCommonService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

私は問題を解決するために管理しています。私は、ムービモジュールのインポートにroutermoduleを追加しなければなりませんでした。ルータリンクはmoviemoduleで参照されています