Components: 'active' is not a valid property of <a>

Created on 11 Sep 2019 · 11Comments · Source: angular/components

Reproduction

StackBlitz is unusable for me

https://github.com/cromefire/active-tab-link

Expected Behavior

<nav mat-tab-nav-bar>
    <a mat-tab-link [active]="true">Tab</a>
</nav>

Should result in an active tab

Actual Behavior

ERROR in src/app/app.component.html(21,21): error TS8002: 'active' is not a valid property of <a>.

Environment

Angular: 9.0.0-next.5
CDK/Material: 8.2.0
Browser(s): N/A
Operating System (e.g. Windows, macOS, Ubuntu): Ubuntu 18.04

Source

cromefire

👍4

All 11 comments

And yes the MatTabsModule is included, it worked in older versions of angular and components and there are no errors shown in my IDE.

cromefire on 11 Sep 2019

I can confirm this is happening after upgrade to Angular Components 8.2.0

naveedahmed1 on 15 Sep 2019

Getting the same error along with other CDK related errors on HTML templates. Downgraded to 8.0.0 and all is good.

tinybigideas on 23 Sep 2019

I am not sure if its an error related to Angular Material or Angular IVY.

Latest version of Angular throws similar error for selectedIndex for mat-tab-group

And I can confirm the issue still exists with Angular 9.0.0-next.8 and Angular Components v 8.2.1.

naveedahmed1 on 25 Sep 2019

I experienced the same issue. Resolved by reverting my package-lock.json.
Please find the working package.json below

{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.0-next.2",
    "@angular/cdk": "~8.1.2",
    "@angular/common": "~9.0.0-next.2",
    "@angular/compiler": "~9.0.0-next.2",
    "@angular/core": "~9.0.0-next.2",
    "@angular/forms": "~9.0.0-next.2",
    "@angular/material": "^8.1.2",
    "@angular/platform-browser": "~9.0.0-next.2",
    "@angular/platform-browser-dynamic": "~9.0.0-next.2",
    "@angular/router": "~9.0.0-next.2",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.5.2",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.1",
    "@angular/cli": "~8.2.1",
    "@angular/compiler-cli": "~9.0.0-next.2",
    "@angular/language-service": "~9.0.0-next.2",
    "@types/node": "~8.9.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}