kendo ui 组件与 Angular 5 不兼容？答案

【问题标题】：kendo ui components are not compatible with Angular 5?kendo ui 组件与 Angular 5 不兼容？
【发布时间】：2018-01-10 14:06:48
【问题描述】：

我有一个angular 2 应用程序，其中使用了kendo ui。

我正在尝试将 Angular 版本从 2.4 升级到 5。

kendo ui 是否与 angular 5 版本不兼容？ 我搜索了一遍，发现最新版本运行的是 angular 4.0 版本。 package.json 如下所示。

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

【问题讨论】：

作为 Kendo UI 的 PM，我想跳到这里并澄清一下 :) 而不是提供另一个答案，我将在这里和适用的地方发表评论：Kendo UI for Angular is fully与 Angular 5 兼容！自 Angular 5 推出以来一直如此。根据您的 package.json，您正在运行我们组件的一些旧版本。例如，您拥有我们 Grid 的版本 0.16.2，而最新版本是 1.6.5。确保在升级 Angular 的同时升级包。
@carlbergenhem - 感谢您的回复，您能否分享如何将所有依赖项更新到最新版本的@angular/kendo - /-/
我相信你应该可以运行npm update (docs.npmjs.com/cli/update)。否则，您可以删除任何显示 @progress/* 的内容，然后为我们的每个包重新运行 npm install 命令。
你是什么意思删除任何东西，“@progress”？来自 package.json?

标签： angular kendo-ui angular5 kendo-angular-ui

【解决方案1】：

Kendo UI 与 Angular 5 完全兼容。Check this blog post

我已经创建了一个应用程序并按照steps 安装了Kendo UI，它运行良好。

命令：

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

截图：

【讨论】：

-node_modules/@progress/kendo-angular-buttons/dist/es/navigation/navigation-config.d.ts(1,10) 中的错误：错误 TS2305：模块 '"C:/ Projects/node_modules/@angular/core/core"' 没有导出的成员 '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"'没有导出的成员“OpaqueToken”。这是使用带有 angular5 的 kendo ui 时的错误
@Gawande - 可能我正在使用旧版本的@progress/ kendo 这就是原因，如果是，那么如何更新它以兼容 angular 5
你用的是哪个版本？
您可以通过访问他们的 Changelog 页面查看特定软件包的最新和最好的版本（这里是一个网格示例：telerik.com/kendo-angular-ui/components/grid/changelog）。有几种方法可以更新你的 package.json，但一个超级简单的方法是从文件中删除对我们组件的包引用，然后重新运行 npm install 命令:)

【解决方案2】：

我使用的是 Angular 5 和 KendoUI 完全兼容！

从我在下面的 cmets 中看到的错误来看，您使用的是旧版本的 KENDO UI 库。 OpaqueToken 在角度 4 中被弃用并在 5 中被移除，因此出现错误。

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

确保从 Kendo npm repo 获取最新的包。

如果您能与我们分享您的 package.json 将会很有帮助，这样我们就可以看到您当前使用的包的版本。

此外，如果您使用 KendoUI 设置了私有注册表，请确保将其从您的 npm 删除，因为 Telerik 已经远离它，它会阻止你从获得最新的 npm 包。

【讨论】：

我已经更新了问题中的 package.json。是的，你是对的，我必须更新当前版本的 kendo ui 库并寻找如何删除私有注册表设置？
要检查你的npm中是否有私有注册表，你可以运行以下命令：npm config list如果你想删除配置，你可以使用npm config delete key键是你的配置正在尝试删除。
metrics-registry = "registry.npmjs.org" scope = "" user-agent = "npm/5.5.1 node/v8.5.0 win32 x64" ;用户配置 C:\Users\skumar5\.npmrc @progress:registry = "registry.npm.telerik.com" ;内置配置未定义前缀 = "C:\\Users\\skumar5\\AppData\\Roaming\\npm" ;节点 bin 位置 = C:\Program Files\nodejs\node.exe ； cwd = C:\Projects\用于测试的项目副本；主页 = C:\Users\skumar5 ； "npm config ls -l" 显示所有默认值。
你能告诉我如何升级 kendo ui 库，我的代码中没有使用 opaque，我不知道如何删除它。
是的！您的注册表中有@progress:registry！尝试运行npm config delete @progress:registry 删除它后，我建议运行npm update 或删除进度包并重新安装。

【解决方案3】：

是的，Kendo UI 与 Angular 5 不兼容。Angular 5 有一些内部变化导致与 Angular 5 不兼容。Kendo 团队正在努力解决这个问题。我一周前寄给他们，他们告诉他们正在努力。但他们没有确认何时发布。

我会建议您坚持使用 Angular 4，当他们发布 Angular 5 兼容版本时，然后迁移到 Angular 5。迁移将很容易，并且您可能不需要在迁移过程中更改单行代码。我还在我的项目中将 Kendo 用于数据网格、日期选择器和组合框。希望对你有帮助

【讨论】：

好的，谢谢您的回复。我会等到发布将只坚持 Angular 4 版本。
从另一条评论重申：Kendo UI 与 Angular 5 完全兼容！更多详情请看这里：telerik.com/blogs/angular-5-is-here
如果您指的是 jQuery 的 Kendo UI，请参阅下面的答案（由 @Shai 发布）。如果您谈论的是 Angular 的 Kendo UI，它与 Angular 5 完全兼容，因为 Angular 5 发布了，正如@carlbergenhem 已经指出的那样。

【解决方案4】：

基本上，Kendo UI 与 Angular2+ 不兼容，因为它们不相互通信。如果您自己实现此通信（使用 markFor Check 并在需要时刷新 Kendo UI 组件）它应该可以正常工作。

我使用 Kendo UI 调度程序组件，我们已经从 Angular2 升级到 4，现在是 5.1.2，它仍然可以工作。您遇到了什么问题？

【讨论】：

我正在使用 kendo ui 网格和 knedo 按钮，在将应用程序更新到 angular 5 后，由于 node_modules/@progress/angular/core"' 没有导出成员 'OpaqueToken
你用的是什么版本的Angular5？
升级到 Angular 5.0.0
那么您只需要更新到较新的版本，它就可以正常工作（当然，除了我提到的限制）。试试 5.1.2。