tabs(ivy): ivy-ngcc can't handle Inputs from an abstract class w/o a decorator like _MatTabGroupBase

[ErVishalM]

Hi,

I am getting this error after upgrade in current cli in mat-tab-group.
Property 'selectedIndex' does not exist on type 'HTMLElement'

Example picking from Angular Website and run after the upgrade to latest then getting this error previously it was not giving any error.
HTML Code is -

<mat-tab-group [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab

    <button mat-raised-button
            class="example-delete-tab-button"
            [disabled]="tabs.length === 1"
            (click)="removeTab(index)">
      Delete Tab
    </button>
  </mat-tab>
</mat-tab-group>

Component Code is-

import {Component} from '@angular/core';
import {FormControl} from '@angular/forms';

/**
 * @title Tab group with dynamically changing tabs
 */
@Component({
  selector: 'tab-group-dynamic-example',
  templateUrl: 'tab-group-dynamic-example.html',
  styleUrls: ['tab-group-dynamic-example.css'],
})
export class TabGroupDynamicExample {
  tabs = ['First', 'Second', 'Third'];
  selected = new FormControl(0);

  addTab(selectAfterAdding: boolean) {
    this.tabs.push('New');

    if (selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }
  }

  removeTab(index: number) {
    this.tabs.splice(index, 1);
  }
}

Package.json is

{
  "name": "WFXERPAg",
  "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": "^8.2.6",
    "@angular/cdk": "^8.2.0",
    "@angular/common": "~8.2.6",
    "@angular/compiler": "~8.2.6",
    "@angular/core": "~8.2.6",
    "@angular/forms": "~8.2.6",
    "@angular/material": "^8.2.0",
    "@angular/material-moment-adapter": "^8.2.0",
    "@angular/platform-browser": "~8.2.6",
    "@angular/platform-browser-dynamic": "~8.2.6",
    "@angular/router": "~8.2.6",
    "core-js": "^3.1.4",
    "jquery": "^3.4.0",
    "jquery-ui": "^1.12.1",
    "jquery-ui-dist": "^1.12.1",
    "moment": "^2.24.0",
    "rxjs": "~6.5.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "~8.3.4",
    "@angular/compiler-cli": "~8.2.6",
    "@angular/language-service": "~8.2.6",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^8.9.5",
    "codelyzer": "^5.0.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "^5.20.0",
    "typescript": "~3.5.3"
  }
}

[Splaktar]

Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

I have transferred this issue to the correct repository for you.

[ErVishalM]

@Splaktar Thank you sir. Previously i was not getting any error in this but i updated all my packages to latest then suddenly i got this error.

[Splaktar]

@ErVishalM can you please provide the versions that you were at before?

[ErVishalM]

@Splaktar I'm sorry buddy but is there any command to check previous version? But I remember it was not that much old because I update angular packages on daily basis. But I can give you my other machine package.json file in which I keep backup and in that version it is working fine but it may not be the last version I had because it's been 10-12 days I did not take backup of my project.

[ErVishalM]

Hi @Splaktar I've found the previous version file please check my package.json file. In this it was working fine.

{
    "name": "Project",
    "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": "^8.2.4",
        "@angular/cdk": "^8.1.4",
        "@angular/common": "~8.2.4",
        "@angular/compiler": "~8.2.4",
        "@angular/core": "~8.2.4",
        "@angular/forms": "~8.2.4",
        "@angular/material": "^8.1.4",
        "@angular/material-moment-adapter": "^8.1.3",
        "@angular/platform-browser": "~8.2.4",
        "@angular/platform-browser-dynamic": "~8.2.4",
        "@angular/router": "~8.2.4",
        "ag-grid-angular": "^21.2.0",
        "ag-grid-community": "^21.2.0",
        "ag-grid-enterprise": "^21.2.0",
        "angular-hammer": "^2.2.0",
        "core-js": "^3.1.4",
        "jquery": "^3.4.0",
        "jquery-ui": "^1.12.1",
        "jquery-ui-dist": "^1.12.1",
        "moment": "^2.24.0",
        "ngx-mat-select-search": "^1.7.2",
        "rxjs": "~6.5.2",
        "tslib": "^1.9.0",
        "zone.js": "~0.9.1"
    },
    "devDependencies": {
        "@angular-devkit/build-angular": "~0.803.0",
        "@angular/cli": "~8.3.2",
        "@angular/compiler-cli": "~8.2.4",
        "@angular/language-service": "~8.2.4",
        "@types/jasmine": "~2.8.8",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^8.9.5",
        "codelyzer": "^5.0.1",
        "jasmine-core": "~2.99.1",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~4.0.0",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~1.1.2",
        "karma-jasmine-html-reporter": "^0.2.2",
        "protractor": "~5.4.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.11.0",
        "typescript": "~3.5.3"
    }
}

[ErVishalM]

@Splaktar any update on this issue?

[Splaktar]

Do you have or can you create a repository for us to reproduce and debug this issue?

[ErVishalM]

@Splaktar I am sorry i dont know how to upload to github or any other website but yeah I have added project in my google drive and you can access it and
download it
and you have to just npm install and then ng serve you will get an error. i have attached ss also.

[Splaktar]

@ErVishalM is it OK if I post it on GitHub so that I can link to parts of the code for discussion?

[ErVishalM]

@Splaktar yes Sir of course. Actually i did not know the process to do that, that is why i could not do that.

[Splaktar]

OK, I did some minor refactoring since the project wasn't fully migrated to the Angular CLI version 8 format. But that wasn't causing this issue.

I also reverted to Angular Material 8.1.4 and this is still reproducible. I think that it's an issue with how your module import/exports are set up but I haven't figured out the fix yet.

The reproduction repo is here.

[Splaktar]

If I disable Ivy here, then it builds just fine.