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

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"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 1
  • Comments: 32 (22 by maintainers)

Commits related to this issue

Most upvoted comments

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"
    }
}

@Splaktar I don’t think those are indeed the cause for this issue, but rather it’s https://github.com/angular/angular/issues/30080. The _MatTabGroupBase is an abstract base class without Angular decorator at the class-level, so currently it is compiled into an ngBaseDef which is not currently handled in the template type checker.

@ErVishalM it looks like you either didn’t run ng update @angular/cli @angular/core or the migration failed in some way. Not all of the items in that list are part of the 7->8 update, a couple are from the 8-9 update.

@ErVishalM see this commit for related changes:

  • Extra browserslist in src/ removed
  • tsconfig.app/spec.json moved to root
  • tsconfig.app.json updated for Ivy w/ files and include
  • tsconfig.json updated for Ivy

Yes, we’ve identified the issue and will work on a fix or submit a bug to angular/angular if needed.

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

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

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

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

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

@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.

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.