can't bind to 'routerlink' since it isn'?

I work on angular 11 I face error when build angular app

ERROR in src/app/Employee-list/employee-list.component.html:22:45 - error NG8002: Can't bind to
'routerLink' since it isn't a known property of 'a'.
Staff List

and below is package json file

"@angular/animations": "^11.2.14",
"@angular/cdk": "^12.1.3",
"@angular/common": "^11.0.0",
"@angular/compiler": "^11.0.0",
"@angular/core": "^11.0.0",
"@angular/forms": "^11.0.0",
"@angular/material": "^11.2.13",
"@angular/router": "^11.2.14",
"@angular/cli": "^11.0.0",
"@angular/compiler-cli": "^11.0.0"

so How to solve issue ?

this is entirly app module

imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
MatAutocompleteModule,
FormsModule,
CommonModule,
MatInputModule,
BsDatepickerModule,
BrowserAnimationsModule,
RouterModule,
BsDatepickerModule.forRoot(),
ReactiveFormsModule,
NgxPaginationModule,
NgbPaginationModule,
NgxLoadersCssModule,
RouterModule.forRoot([
{
path: '',
component: MasterRouteComponent,
children: [
{ path: '', redirectTo: '/employees', pathMatch: 'full' },
{
path: 'employees',
component: EmployeeComponent,
data: { title: 'Dashboard' }
},
{ path: 'branches', component: branchesComponent },
{ path: 'ItemCategory', component: ItemCategoryComponent },
{ path: 'Vendors', component: VendorsComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'UnitsCode', component: UnitsCodeComponent },
{
path: 'InventoryLocations',
component: InventoryLocationsComponent
},
{ path: 'items', component: ItemsComponent },
{ path: 'unitConverter', component: UnitsCodeConverterComponent },
{ path: 'Purchase', component: PurchaseComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: 'inventorysys', component: InventorysysComponent },
{ path: 'inventorysys/:optionId', component: InventorysysComponent }
]
}
]),
NgbModule
],
providers: [
DatePipe,
BrancheService,
ItemCategoryService,
UnitsCodeService,
VendorsService,
InventoryLocationsService,
ItemsService,
UnitsCodeConverterService,
EmployeeService,
PurchaseService,
InventoryService
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

ahmed elbarbary5y ago
this is entirly app module
imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    MatAutocompleteModule,
    FormsModule,
    CommonModule,

    MatInputModule,
    BsDatepickerModule,
    BrowserAnimationsModule,
    RouterModule,

    BsDatepickerModule.forRoot(),
    ReactiveFormsModule,
    NgxPaginationModule,
    NgbPaginationModule,
    NgxLoadersCssModule,
    RouterModule.forRoot([
      {
        path: '',
        component: MasterRouteComponent,
        children: [
          { path: '', redirectTo: '/employees', pathMatch: 'full' },
          {
            path: 'employees',
            component: EmployeeComponent,
            data: { title: 'Dashboard' }
          },
          { path: 'branches', component: branchesComponent },
          { path: 'ItemCategory', component: ItemCategoryComponent },
          { path: 'Vendors', component: VendorsComponent },
          { path: 'counter', component: CounterComponent },
          { path: 'UnitsCode', component: UnitsCodeComponent },
          {
            path: 'InventoryLocations',
            component: InventoryLocationsComponent
          },
          { path: 'items', component: ItemsComponent },
          { path: 'unitConverter', component: UnitsCodeConverterComponent },
          { path: 'Purchase', component: PurchaseComponent },
          { path: 'fetch-data', component: FetchDataComponent },
          { path: 'inventorysys', component: InventorysysComponent },
          { path: 'inventorysys/:optionId', component: InventorysysComponent }
        ]
      }
    ]),
    NgbModule
  ],
  providers: [
    DatePipe,
    BrancheService,
    ItemCategoryService,
    UnitsCodeService,
    VendorsService,
    InventoryLocationsService,
    ItemsService,
    UnitsCodeConverterService,
    EmployeeService,
    PurchaseService,
    InventoryService
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
ahmed elbarbary5y ago
thank tou for reply
i already do that
but issue still exist
this stackblitz for component employee list and app module
https://stackblitz.com/edit/angular-uffug5?file=src%2Fapp%2FEmployee-list%2Femployee-list.component.ts
Sachin Singh5y ago
in the current component module import routermodule
import {RouterModule} from '@angular/router';
@NgModule({
   declarations:[YourComponents],
   imports:[RouterModule]