Kendo UI break on angular 14 version?

[kapilSoni101]

I'm submitting a...

• Bug report

Current behavior

Kendo UI break on chrome
Hi Team,
I have implemented kendo-UI in the angular 14 but kendo UI totally break. can you please let me know why i got this issue.check below attached screenshot for reference

Expected behavior

UI working properly

Minimal reproduction of the problem with instructions

Environment

Package versions:
{
"name": "epoc",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"startplat": "ng serve platform-port --port=4201",
"startpub": "ng serve publisher-port --port=4202",
"startbiz": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve business-port --port=4203",
"startcust": "ng serve customer-port --port=4204",
"startvend": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve vendor-port --port=4205",
"buildplat": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --build-optimizer --base-href=platform --project=platform-port --source-map=false --configuration=production",
"buildpub": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --build-optimizer --base-href=publisher --project=publisher-port --source-map=false --configuration=production",
"buildcust": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --base-href=customer --project=customer-port --source-map=false --configuration=production",
"buildbiz": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --base-href=business --project=business-port --source-map=false --configuration=production",
"buildvend": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --base-href=vendor --project=vendor-port"
},
"private": true,
"dependencies": {
"@agm/core": "^1.0.0-beta.6",
"@angular/animations": "^14.0.3",
"@angular/cdk": "^8.0.0",
"@angular/common": "^14.0.3",
"@angular/compiler": "^14.0.3",
"@angular/core": "^14.0.3",
"@angular/forms": "^14.0.3",
"@angular/platform-browser": "^14.0.3",
"@angular/platform-browser-dynamic": "^14.0.3",
"@angular/router": "^14.0.3",
"@aspnet/signalr": "^1.1.4",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"@progress/kendo-angular-buttons": "^5.0.0",
"@progress/kendo-angular-charts": "^6.0.1",
"@progress/kendo-angular-common": "^1.0.0",
"@progress/kendo-angular-dateinputs": "^4.0.0",
"@progress/kendo-angular-dropdowns": "^4.0.0",
"@progress/kendo-angular-excel-export": "^3.0.0",
"@progress/kendo-angular-grid": "^4.1.1",
"@progress/kendo-angular-inputs": "^6.0.0",
"@progress/kendo-angular-intl": "^2.0.0",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-pdf-export": "^2.0.0",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-angular-upload": "^6.1.0",
"@progress/kendo-data-query": "^1.0.0",
"@progress/kendo-drawing": "^1.0.0",
"@progress/kendo-licensing": "^1.2.2",
"@progress/kendo-theme-default": "latest",
"@types/moment-timezone": "^0.5.12",
"@types/node": "^8.10.66",
"bootstrap": "^3.3.7",
"classlist.js": "^1.1.20150312",
"croppie": "^2.6.4",
"google-libphonenumber": "^3.2.2",
"hammerjs": "^2.0.8",
"jquery": "^3.4.1",
"moment": "^2.24.0",
"moment-timezone": "^0.5.25",
"ng-lazyload-image": "^9.1.0",
"ng-search-filter": "^1.1.0",
"ng2-search-filter": "^0.5.1",
"ngx-device-detector": "^1.3.9",
"ngx-print": "^1.2.1",
"ngx-toastr": "^14.0.0",
"oidc-client": "^1.7.1",
"stacktrace-js": "^2.0.0",
"ts.validator.fluent": "^1.3.0",
"tslib": "^2.4.0",
"typescript-collections": "^1.3.2",
"zone.js": "~0.11.5"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.0.3",
"@angular-devkit/build-ng-packagr": "^0.801.3",
"@angular/cli": "^14.0.3",
"@angular/compiler-cli": "^14.0.3",
"@angular/language-service": "^14.0.3",
"@angular/localize": "^14.0.3",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/moment": "^2.13.0",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~6.3.20",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"ng-packagr": "^14.0.2",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tsickle": "^0.35.0",
"tslint": "~6.1.3",
"typescript": "~4.6.4"
}
}

Browser:

• Chrome (desktop) version - 103.0.5060.114
• Firefox (desktop) version - 102.0.1

System:

• TypeScript version:t~4.6.4
• Node version: 14.17.0
• Platform: Windows

[Louspirit]

Even using next version, I've got compatibility issues. Seems we have to wait for an Angular 14 compatible release.

 Could not resolve dependency:
npm ERR! peer @angular/animations@"^12.0.0 || ^13.0.0" from @progress/kendo-angular-buttons@8.0.0-next.202204131126
npm ERR! node_modules/@progress/kendo-angular-buttons
npm ERR!   @progress/kendo-angular-buttons@"next" from the root project

[mbechev]

Hi,

All Kendo UI for Angular packages are compatible with Angular v14, but in their latest versions. This can be seen in the ChangeLog section of each package:
https://www.telerik.com/kendo-angular-ui/components/grid/changelog/

Currently installed Kendo package versions are out of date and don't support Angular v14. Update them accordingly:
https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/

If any further assistance is required for this case, please open a support ticket.

[Louspirit]

But isn't next supposed to be the latest version, only that it's ivy-compatible @mbechev?

[kapilSoni101]

@mbechev sir i agree with you with but I am facing some issue on angular 8 version also.so why it's got same issue on angular 8?

[mbechev]

Using ng add command will atuomatically install the latest version of a component:
https://www.telerik.com/kendo-angular-ui/components/grid/get-started/#toc-quick-setup-with-angular-cli

@next is no longer needed (it was used to install the packages in the past, before releasing them) - #3502. Now all packages are Ivy compatible in their latest versions.

It is recommended to install and use the versions listed in the ChangeLog section of each package.

Angular v8 is no longer supported by the framework and Kendo UI suite:
https://www.telerik.com/kendo-angular-ui/components/installation/requirements/#toc-angular

If you are experiencing any specific issue, open a support ticket. The current report is closed since the report is for bug reports only.