I have an igx-grid that worked perfectly with version 8 of Angular. After it was upgraded to Angular V12.0.5 with Igniteui Angular V12.0.3 the grid with groupBy broke raising the error "ERROR TypeError: ariaLabel is undefined" in core.js:6456. I couldn't find any reference to this error. I even copied the same example from the site and the same error always appears over and over again. How to solve this please?
Hello Lima,
Thank you for contacting Infragistics Community!
Please note that currently each of the four samples placed within the Group By topic in our official documentation is using IgniteUI for Angular 12.0.3. After investigating those samples I couldn’t reproduce the issue you have described. Having this in mind could you please send me the link to the sample you have copied along with steps for reproducing the described issue? This is going to be highly appreciated and will allow me to provide you with solution as soon as possible.
Looking forward to hearing from you!
Best Regards, Martin Evtimov Associate Software Developer Infragistics, Inc.
Hi Martin, thanks for your attention.
I copied the example from the link: stackblitz.com/.../grid-groupby -groupby-sample%2Fgrid-groupby-sample.component.html
I copied the files:invoiceData.tsprevent-scroll.directive.tsgrid-groupby-sample.component.htmlgrid-groupby-sample.component.scssgrid-groupby-sample.component.ts
I created the same directories and placed the files exactly as in the example.
The only difference is in the package.json file.My package.json is as below:
"dependencies": { "@angular/animations": "^12.0.5", "@angular/common": "^12.0.5", "@angular/compiler": "^12.0.5", "@angular/core": "^12.0.5", "@angular/forms": "^12.0.5", "@angular/platform-browser": "^12.0.5", "@angular/platform-browser-dynamic": "^12.0.5", "@angular/router": "^12.0.5", "@angular/service-worker": "^12.0.5", "@auth0/angular-jwt": "^5.0.2", "@types/hammerjs": "^2.0.39", "bootstrap": "^4.6.0", "hammerjs": "^2.0.8", "idb": "^4.0.5", "igniteui-angular": "^12.0.3", "jszip": "^3.6.0", "minireset.css": "0.0.6", "ngx-toastr": "11.3.3", "resize-observer-polyfill": "^1.5.1", "rxjs": "~6.6.7", "sweetalert2": "^9.17.2", "tslib": "^2.3.0", "web-animations-js": "^2.3.2", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^12.0.5", "@angular/cli": "^12.0.5", "@angular/compiler-cli": "^12.0.5", "@angular/language-service": "^12.0.5", "@types/googlemaps": "^3.43.3", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "^2.0.9", "@types/node": "^12.20.15", "codelyzer": "^6.0.0", "igniteui-angular-i18n": "^12.0.4", "igniteui-cli": "~8.8.3", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "^6.3.4", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~7.0.0", "tslint": "~6.1.0", "typescript": "~4.2.4" }, "resolutions": { "@babel/preset-env": "7.5.5" }
I think there might be some incompatibility between these packages.
I hope it was enlightening to reproduce the error I have gotten.
Thank you in advance...
Thank you for getting back to me!
I believe you will find the attached sample I have prepared for you helpful. I have used the provided package.json file which I have slightly modified: I have changed the version of the igniteui-cli package to 8.0.1 (currently the latest version) and I have removed the @types/googlemaps package. As you can observe after executing npm install and ng serve the project is compiled successfully and everything seems to work as expected.
If this sample is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.
Looking forward to hearing from you.
Note: Here you can find additional information about the deprecation warnings thrown during compilation.
angular12.zip