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 { }
Solution. You need to import the routing module with this component to the root module of the feature.
Yes it can be attached to div tag, your route is probably wrong try add / in front of route.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With