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
- fix(tabs): avoid template type checking errors with Ivy Along the same lines as #17022. Adds annotations to the various base classes that declare inputs, because the Ivy template type checker doesn't... — committed to crisbeto/material2 by crisbeto 5 years ago
- fix(tabs): avoid template type checking errors with Ivy (#17228) Along the same lines as #17022. Adds annotations to the various base classes that declare inputs, because the Ivy template type checke... — committed to angular/components by crisbeto 5 years ago
- fix(tabs): avoid template type checking errors with Ivy (#17228) Along the same lines as #17022. Adds annotations to the various base classes that declare inputs, because the Ivy template type checke... — committed to angular/components by crisbeto 5 years ago
Hi @Splaktar I’ve found the previous version file please check my package.json file. In this it was working fine.
@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 anngBaseDef
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:
browserslist
insrc/
removedtsconfig.app/spec.json
moved to roottsconfig.app.json
updated for Ivy w/files
andinclude
tsconfig.json
updated for IvyYes, 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.