Angular 17 - Can't bind to 'routerLink' since it isn't a known property of 'a'

Question

I get this error since I upgraded Angular to version 17, I'm importing the RouterModule at the root of the project, it worked fine before the upgrade and I didn't find how to fix this error. Could you please help?

app-bar-menu component

<kendo-appbar position="top">
  ...
  <kendo-appbar-section class="horizontal-menu">
    <ul class="nav menu">
      <li routerLinkActive="active">
        <a [routerLink]="['/menu1']">Menu1</a>
      </li>
      <li routerLinkActive="active">
        <a [routerLink]="['/menu2']">Menu2</a>
      </li>
      <li routerLinkActive="active">
        <a [routerLink]="['/menu3']">Menu3</a>
      </li>
    </ul>
  </kendo-appbar-section>
  ...
</kendo-appbar>

app component html

<ng-container>
  <app-bar-menu></app-bar-menu>
  <body>
    <div class="app-container">
      <div kendoDialogContainer></div>
      <router-outlet></router-outlet>
    </div>
  </body>
</ng-container>

app component ts

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
standalone: true,
imports: [
    NgIf,
    AppBarMenuComponent,
    DialogModule,
    RouterOutlet,
],

}) export class AppComponent {}

Edit1: I changed the app-bar-menu component to standalone but I still have the same error.

@Component({
  selector: 'app-bar-menu',
  standalone: true,
  imports: [RouterModule, RouterLink, RouterLinkActive, KendoUiAngularModule, TranslateModule],
  templateUrl: './app-bar-menu.component.html',
  styleUrls: ['./app-bar-menu.component.scss'],
})
export class AppBarMenuComponent implements OnInit {...}

Edit2: I changed all the component of my application to standalone and still have the same error and the ones I add bellow. The application build and run without problem but these errors appears in red in the html.

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

Can't bind to 'formControl' since it isn't a known property of 'kendo-textbox'

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

Can't bind to 'formControl' since it isn't a known property of 'kendo-dateinput'.

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

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

I used npm-check-updates to update the @progress components but I don't know if these errors have something to do with wrong dependencies versions or something else, could someone please help?

"dependencies": {
    "@angular/animations": "~17.3.7",
    "@angular/common": "~17.3.7",
    "@angular/compiler": "~17.3.7",
    "@angular/core": "~17.3.7",
    "@angular/forms": "~17.3.7",
    "@angular/localize": "~17.3.7",
    "@angular/platform-browser": "~17.3.7",
    "@angular/platform-browser-dynamic": "~17.3.7",
    "@angular/platform-server": "~17.3.7",
    "@angular/router": "~17.3.7",
    "@fortawesome/angular-fontawesome": "^0.14.1",
    "@fortawesome/fontawesome-common-types": "^6.5.2",
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@progress/kendo-angular-buttons": "^15.5.0",
    "@progress/kendo-angular-common": "^15.5.0",
    "@progress/kendo-angular-dateinputs": "^15.5.0",
    "@progress/kendo-angular-dialog": "^15.5.0",
    "@progress/kendo-angular-dropdowns": "^15.5.0",
    "@progress/kendo-angular-excel-export": "^15.5.0",
    "@progress/kendo-angular-grid": "^15.5.0",
    "@progress/kendo-angular-icons": "^15.5.0",
    "@progress/kendo-angular-indicators": "^15.5.0",
    "@progress/kendo-angular-inputs": "^15.5.0",
    "@progress/kendo-angular-intl": "^15.5.0",
    "@progress/kendo-angular-l10n": "^15.5.0",
    "@progress/kendo-angular-label": "^15.5.0",
    "@progress/kendo-angular-layout": "^15.5.0",
    "@progress/kendo-angular-listview": "^15.5.0",
    "@progress/kendo-angular-menu": "^15.5.0",
    "@progress/kendo-angular-navigation": "^15.5.0",
    "@progress/kendo-angular-notification": "^15.5.0",
    "@progress/kendo-angular-pdf-export": "^15.5.0",
    "@progress/kendo-angular-popup": "^15.5.0",
    "@progress/kendo-angular-progressbar": "^15.5.0",
    "@progress/kendo-angular-ripple": "^15.5.0",
    "@progress/kendo-angular-tooltip": "^15.5.0",
    "@progress/kendo-angular-treeview": "^15.5.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-drawing": "^1.20.1",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "^2.3.0",
    "@progress/kendo-theme-default": "^7.2.1",
    "@types/lodash": "^4.17.1",
    "angular-oauth2-oidc": "^17.0.2",
    "bootstrap": "^5.3.3",
    "cldr-core": "^45.0.0",
    "cldr-dates-full": "^45.0.0",
    "cldr-numbers-full": "^45.0.0",
    "jquery": "^3.7.1",
    "kendo-ui-license": "^1.0.1",
    "locale-codes": "^1.3.1",
    "npm-check-updates": "^16.14.20",
    "oidc-client": "^1.11.5",
    "popper.js": "^1.16.0",
    "run-script-os": "^1.1.6",
    "rxjs": "~7.8.1",
    "zone.js": "~0.14.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~17.3.6",
    "@angular-eslint/builder": "17.3.0",
    "@angular-eslint/eslint-plugin": "17.3.0",
    "@angular-eslint/eslint-plugin-template": "17.3.0",
    "@angular-eslint/schematics": "17.3.0",
    "@angular-eslint/template-parser": "17.3.0",
    "@angular/cli": "~17.3.6",
    "@angular/compiler-cli": "~17.3.7",
    "@types/jasmine": "~5.1.4",
    "@types/jasminewd2": "~2.0.13",
    "@types/jquery": "^3.5.29",
    "@types/node": "^20.12.8",
    "@typescript-eslint/eslint-plugin": "^7.8.0",
    "@typescript-eslint/parser": "^7.8.0",
    "eslint": "^9.2.0",
    "jasmine-core": "~5.1.2",
    "karma": "~6.4.3",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.1",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "^2.1.0",
    "ngx-translate-testing": "^7.0.0",
    "tslib": "^2.6.2",
    "typescript": "^5.4.5"
  }

Does this answer your question? Can't bind to 'routerLink' since it isn't a known property — JSON Derulo
– JSON Derulo, Commented May 2, 2024 at 9:06
@Yong Shun yes now I'm using standalone component, I updated the question to add the info. — ZotNet
– ZotNet, Commented May 2, 2024 at 13:54
Now you add RouterLink and RouterLinkActive into the imports array for your AppBarMenuComponent. — Yong Shun
– Yong Shun, Commented May 2, 2024 at 13:57

Simon · Accepted Answer · 2024-05-02 09:48:48Z

6

You have to import RouterModule in your corresponding Component or Module depending whether you are using a standalone Component:

Standalone Component:

@Component({
  ...
  standalone: true,
  imports: [...,RouterModule],
  ...
})

Module:

@NgModule({
  ...
  imports: [...,RouterModule
  ]
})

edited May 2, 2024 at 9:48

answered May 2, 2024 at 9:11

Simon

5141 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ZotNet Over a year ago

I updated the question to add more info

ZotNet · Accepted Answer · 2024-05-09 13:23:16Z

-1

I fixed this error by removing the [] and ['']

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

changed from

<a [routerLink]="['/menu']">Menu</a>

to

<a routerLink="/menu">Menu</a>

answered May 9, 2024 at 13:23

ZotNet

1091 silver badge10 bronze badges

1 Comment

Simon Over a year ago

Mmhhh yeah oversaw that one, but I rather think the correct form uses property binding with brackets for routerLink, but without inside the string like so: <a [routerLink]="'/menu'">Menu</a>

Collectives™ on Stack Overflow

Angular 17 - Can't bind to 'routerLink' since it isn't a known property of 'a'

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related