Getting Can't bind to 'routerLink' since it isn't a known property of 'a'. error in spite of referencing router moudule
11,251
Solution 1
i have managed to fix the issue. I had to add the routermodule to the imports of the moviemodule is the routerlinks are referred in the moviemodule
Solution 2
Import RouterModule
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { LayoutComponent } from './layout/layout.component';
@NgModule({
imports: [
RouterModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [
LayoutComponent
],
exports: [
FormsModule,
ReactiveFormsModule,
],
entryComponents: []
})
export class SharedModule { }
Author by
Tom
Updated on July 25, 2022Comments
-
Tom almost 2 years
I am implementing basic routing in my angular 4 application and getting the following error when loading the application on the browser. I have defined the routes in approuting.module as also referenced the router module in Ngmodule as well approuting.module. Not sure what the problem is
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
Below is the source code of my application
snippet of the kendo grid in 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 { }