0

I have a angular 2 application with kendo ui being used in it.

I am trying to upgrade the angular version from 2.4 to 5.

Is kendo ui not compatible with angular 5 version? I searched over and found most recent version is running with angular 4.0 version. the package.json is given below.

package.json 

{
  "name": "dashboard",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "2.0.0-beta.3",
    "@angular/platform-browser": "5.0.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "^5.0.0",
    "@progress/kendo-angular-buttons": ""0.20.1"",
    "@progress/kendo-angular-charts": "0.16.1",
    "@progress/kendo-angular-dropdowns": "0.32.0",
    "@progress/kendo-angular-grid": "0.16.2",
    "@progress/kendo-angular-intl": "0.10.0",
    "@progress/kendo-angular-layout": "0.21.4",
    "@progress/kendo-data-query": "0.3.6",
    "@progress/kendo-drawing": "0.13.8",
    "@progress/kendo-theme-default": "2.19.6",
    "@telerik/kendo-theme-default": "1.33.4",
    "@types/moment": "2.13.0",
    "angular2-highcharts": "0.5.5",
    "angular2-tooltip": "^3.1.0",
    "bootstrap": "3.3.7",
    "classlist.js": "^1.1.20150312",
    "core-js": "2.4.1",
    "cytoscape-qtip": "^2.7.1",
    "font-awesome": "4.7.0",
    "fullcalendar": "3.1.0",
    "hammerjs": "2.0.8",
    "intl": "^1.2.5",
    "jquery": "^3.2.1",
    "js-polyfills": "^0.1.34",
    "lodash": "^4.17.4",
    "moment": "2.18.1",
    "ng-lightning": "1.3.0",
    "ng2-bootstrap": "1.4.2",
    "ngx-tooltip": "0.0.9",
    "primeng": "^2.0.0",
    "qtip": "0.0.4",
    "qtip2": "^3.0.3",
    "rxjs": "5.1.0",
    "ts-helpers": "1.1.1",
    "underscore": "1.8.3",
    "web-animations-js": "^2.2.5",
    "xmldom": "^0.1.27",
    "zone.js": "0.7.6"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.3",
    "@angular/compiler-cli": "2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/lodash": "^4.14.50",
    "@types/node": "6.0.68",
    "codelyzer": "2.0.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.1.0",
    "ts-node": "2.0.0",
    "tslint": "4.4.2",
    "typescript": "2.4.2"
  }
}
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
user8819437
  • 69
  • 1
  • 13
  • As the PM for Kendo UI I wanted to jump in here and clear things up a bit :) Rather than provide yet another answer I'll just comment here and where applicable: Kendo UI for Angular is fully compatible with Angular 5! Has been since Angular 5 was introduced. Based on your package.json you're running some old versions of our components. For example, you have version `0.16.2` of our Grid while the latest is `1.6.5`. Make sure that you're upgrading your packages along with your Angular upgrade. – carlbergenhem Jan 10 '18 at 18:50
  • @carlbergenhem - thank you for your response, could you plz share how to update all the dependencies to latest version of @angular/kendo - /-/ – user8819437 Jan 10 '18 at 18:56
  • You should be able to just run `npm update` (https://docs.npmjs.com/cli/update) I believe. Otherwise you can just remove anything that says `@progress/*` and then re-run the `npm install` command for each of our packages. – carlbergenhem Jan 10 '18 at 18:59
  • What do you mean remove anything, "@progress"? From the the package.json? – jwize Apr 11 '18 at 18:47

4 Answers4

2

Kendo UI is fully compatible with Angular 5. Check this blog post

I have created an application and Installed Kendo UI following steps, adn it is working fine.

commands :

ng new my-angular-kendo --style=scss
cd my-angular-kendo
npm install --save @progress/kendo-angular-buttons @progress/kendo-angular-l10n @angular/animations

package.json :

"dependencies": {
  "@angular/animations": "^5.1.3",
  "@angular/common": "^5.0.0",
  "@angular/compiler": "^5.0.0",
  "@angular/core": "^5.0.0",
  "@angular/forms": "^5.0.0",
  "@angular/http": "^5.0.0",
  "@angular/platform-browser": "^5.0.0",
  "@angular/platform-browser-dynamic": "^5.0.0",
  "@angular/router": "^5.0.0",
  "@progress/kendo-angular-buttons": "^2.0.0",
  "@progress/kendo-angular-l10n": "^1.0.5",
  "core-js": "^2.4.1",
  "rxjs": "^5.5.2",
  "zone.js": "^0.8.14"
},

ScreenShot :

Kendo UI Demo

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
  • -ERROR in node_modules/@progress/kendo-angular-buttons/dist/es/navigation/navigation-config.d.ts(1,10): error TS2305: Module '"C:/Projects/node_modules/@angular/core/core"' has no exported member 'OpaqueToken'. node_modules/@progress/kendo-angular-grid/dist/es/list.component.d.ts(1,95): error TS2305: Module '"C:/Projects/node_modules/@angul ar/core/core"' has no exported member 'OpaqueToken'. this is the error when using kendo ui with angular5 – user8819437 Jan 10 '18 at 15:40
  • @Gawande - may be im using older version of @progress/ kendo that is the reason, if yes, then how to update it for angular 5 compatible – user8819437 Jan 10 '18 at 16:05
  • Which version are you using? – Sangwin Gawande Jan 10 '18 at 18:21
  • 1
    You can see the latest and greatest versions of a particular package by going to their Changelog page (here's a sample of the Grid: https://www.telerik.com/kendo-angular-ui/components/grid/changelog/). There are a few ways to update your package.json, but a super easy way is to just remove the package reference to our components from the file and just re-run the `npm install` command :) – carlbergenhem Jan 10 '18 at 18:54
2

I am using Angular 5 and KendoUI is fully compatible!

from the error that I see in the comments below, it looks like you are using an older version of KENDO UI library. OpaqueToken is deprecated in angular 4 and removed in 5, hence the error.

https://github.com/angular/angular/pull/18971

Make sure you grab the latest package from Kendo npm repo.

It would be helpful if you can share with us your package.json so we can see which version of the package you are currently using.

In addition, if you have setup a private registry with KendoUI, make sure to remove it from your npm, as Telerik has step away from it and it will prevent you from getting the latest npm package.

Ringo
  • 601
  • 5
  • 14
  • i have updated the package.json in the question. yes you are correct i have to update current version of kendo ui library and looking for how to remove private registry setup? – user8819437 Jan 10 '18 at 16:10
  • To check if you have a private registry in you npm, you can run the following command: `npm config list` if you want to remove the config, you can use `npm config delete key` key is the config that you are trying to delete. – Ringo Jan 10 '18 at 16:29
  • metrics-registry = "https://registry.npmjs.org/" scope = "" user-agent = "npm/5.5.1 node/v8.5.0 win32 x64" ; userconfig C:\Users\skumar5\.npmrc @progress:registry = "https://registry.npm.telerik.com/" ; builtin config undefined prefix = "C:\\Users\\skumar5\\AppData\\Roaming\\npm" ; node bin location = C:\Program Files\nodejs\node.exe ; cwd = C:\Projects\copy of project for testing ; HOME = C:\Users\skumar5 ; "npm config ls -l" to show all defaults. – user8819437 Jan 10 '18 at 16:31
  • could you tell how to upgrade kendo ui library and i have not used opaque in my code, i dont know how to remove it. – user8819437 Jan 10 '18 at 16:32
  • yup! you have `@progress:registry` in your registry! try running `npm config delete @progress:registry ` After you have removed it, i would suggest either running `npm update` or removing progress packages and installing them again. – Ringo Jan 10 '18 at 16:36
  • Versions of @angular/compiler-cli and typescript could not be determined. The most common reason for this is a broken npm install. Please make sure your package.json contains both @angular/compiler-cli and typescript in devDependencies, then delete node_modules and package-lock.json (if you have one) and run npm install again. – user8819437 Jan 10 '18 at 16:51
  • try running npm install again? your ts-node and tslint version seems kinda low, try updating to `"ts-node": "3.2.0"`, `"tslint": "5.7.0"`. – Ringo Jan 10 '18 at 17:25
  • You can follow the instructions in the following docs and GitHub issue: https://www.telerik.com/kendo-angular-ui/components/troubleshooting/#toc-i-cannot-install-the-latest-versions-of-kendo-ui-packages-for-angular https://github.com/telerik/kendo-angular/issues/712 – topalkata Jan 11 '18 at 18:44
0

Yes Kendo UI is not compatible with Angular 5. There is some internal change in Angular 5 which leads to incompatible with Angular 5. Kendo team working on it. I mailed them before a week ago and they told that they are working on it. But they didn't confirmed when they will release.

I will recommend you to stick with Angular 4 and when they will release ANgular 5 compatible version then migrate to ANgular 5. Migration will be easy and may be you don't need to change single line of code during migration. I'm also using Kendo in my project for data-grid, datepicker and combobox. Hope it will help

Sandip Jaiswal
  • 3,428
  • 2
  • 13
  • 15
  • ok thanks for your reply. i will wait and till release will stick to angular 4 version only. – user8819437 Jan 10 '18 at 14:16
  • Re-iterating from another comment: Kendo UI is fully compatible with Angular 5! See here for more details: https://www.telerik.com/blogs/angular-5-is-here – carlbergenhem Jan 10 '18 at 18:51
  • If you mean Kendo UI for jQuery, see the answer below (posted by @Shai). If you are talking about Kendo UI for Angular, it is fully compatible with Angular 5 since Angular 5 was released, as already pointed out by @carlbergenhem. – topalkata Jan 11 '18 at 18:47
0

Basically Kendo UI isn't compatible with Angular2+ since they don't communicate with each other. If you implement this communication yourself (using markFor Check and refreshing the Kendo UI component when needed) it should work fine.

I use the Kendo UI Scheduler component and we've advanced from Angular2 to 4 and now wer'e at 5.1.2 and it still works. What problems are you experiencing?

Shai
  • 3,659
  • 2
  • 13
  • 26