Angular-2 的 Kendo UI 错误答案

【问题标题】：Error in Kendo UI with Angular-2Angular-2 的 Kendo UI 错误
【发布时间】：2017-02-27 11:55:42
【问题描述】：

我在 angular2 应用程序中使用剑道 UI，我已按照此 URL http://www.telerik.com/blogs/cooking-with-aspnet-core-and-angular-2 中的步骤操作，在浏览器中运行应用程序后，它工作正常，但每当我添加剑道 UI 项目，如剑道网格/剑道按钮以下错误。

尝试将@progress 的版本与angular 匹配但未成功。

有人知道这个错误吗？

处理请求时发生未处理的异常。异常：调用节点模块失败并出现错误：预渲染因错误而失败：错误：找不到模块“@progress/kendo-data-query” 在 webpackMissingModule (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:10709:90) 在对象。 (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:10709:194) 在 __webpack_require__ (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:20:30) 在对象。 (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:7664:29) 在 __webpack_require__ (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:20:30) 在对象。 (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:10766:23) 在 __webpack_require__ (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:20:30) 在 Object._b (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:11091:21) 在 __webpack_require__ (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:20:30) 在对象。 (D:\DemoProject\ng2\kui2-aspnetcore\ClientApp\dist\main-server.js:10027:28) 当前目录为：D:\DemoProject\ng2\kui2-aspnetcore Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance+d__7.MoveNext()

【问题讨论】：

标签： angular kendo-ui kendo-grid

【解决方案1】：

发生此错误的原因取决于我们使用的 Kendo UI 和 Angular-2 版本，因此我们应该提及/指定其他依赖项，

例如在上面的错误剑道UI版本应该是这样的， "@progress/kendo-angular-buttons": "^0.13.1", "@progress/kendo-angular-grid": "^0.10.0", "@progress/kendo-data-query": "^0.3.0", "@telerik/kendo-theme-default": "^1.28.1",

下面是完整的 package.json 文件，

    {
  "name": "Angular2Spa",
  "version": "0.0.0",
  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js"
  },
  "dependencies": {
    "@angular/common": "2.0.2",
    "@angular/compiler": "2.0.2",
    "@angular/core": "2.0.2",
    "@angular/forms": "2.0.2",
    "@angular/http": "2.0.2",
    "@angular/platform-browser": "2.0.2",
    "@angular/platform-browser-dynamic": "2.0.2",
    "@angular/platform-server": "2.0.2",
    "@angular/router": "3.0.2",
    "@progress/kendo-angular-buttons": "^0.13.1",
    "@progress/kendo-angular-grid": "^0.10.0",
    "@progress/kendo-data-query": "^0.3.0",
    "@telerik/kendo-theme-default": "^1.28.1",
    "@types/node": "^6.0.42",
    "angular2-platform-node": "~2.0.11",
    "angular2-template-loader": "^0.6.2",
    "angular2-universal": "~2.0.11",
    "angular2-universal-patch": "^0.2.1",
    "angular2-universal-polyfills": "~2.0.11",
    "aspnet-prerendering": "^2.0.0",
    "aspnet-webpack": "^1.0.17",
    "awesome-typescript-loader": "3.0.0-beta.13 || ^3.0.0",
    "bootstrap": "^3.3.7",
    "css": "^2.2.1",
    "css-loader": "^0.25.0",
    "es6-shim": "^0.35.1",
    "event-source-polyfill": "^0.0.7",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^2.0.0-rc",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.4",
    "install": "^0.8.7",
    "isomorphic-fetch": "^2.2.1",
    "jquery": "^2.2.1",
    "json-loader": "^0.5.4",
    "npm": "^4.3.0",
    "preboot": "^4.5.2",
    "raw-loader": "^0.5.1",
    "rxjs": "5.0.0-beta.12",
    "style-loader": "^0.13.1",
    "to-string-loader": "^1.1.5",
    "typescript": "^2.0.3",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.0",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1",
    "zone.js": "^0.6.25"
  },
  "devDependencies": {
    "@types/chai": "^3.4.34",
    "@types/jasmine": "^2.5.37",
    "chai": "^3.5.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-webpack": "^1.8.0"
  }
}

以上更改解决了我的问题。

【讨论】：