0

각도 4 애플리케이션에서 기본 라우팅을 구현하고 브라우저에서 애플리케이션을로드 할 때 다음 오류가 발생합니다. 나는 approuting.module의 라우트를 정의 했으므로 Ngmodule의 라우터 모듈과 approuting.module도 참조했다. 확실하지 문제는 다음Getting 'routerLink'는 'a'의 알려진 속성이 아니기 때문에 바인딩 할 수 없습니다. 라우터 모듈을 참조하는 중 오류가 발생했습니다

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/[email protected]: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/[email protected]: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{} 
,210

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

'BrowserModule'을 가져 오기 최상위로 옮깁니다. 또는 최소한 AppRoutingModule 위. –

+0

그게 도움이 안된다 – Tom

+0

코드가 제대로 보이는지, 모든 것이 실제로 컴파일되었는지 확인하십시오. 모든'ng serve' 또는'ng build -w'와'rd/s/q node_modules' (또는'rm -rf node_modules') 리눅스의 경우), 그리고 나서'npm i'를보고 –

답변

1

내가 문제를 해결하기 위해 관리했다. 동영상 모듈의 수입에 routermodule을 추가해야했습니다. routerlinks는 moviemodule에서 참조됩니다.