如何让 Kendo ui angular 2 组件在 .NET MVC5 中工作？答案

【问题标题】：How to get Kendo ui angular 2 components to work in .NET MVC5?如何让 Kendo ui angular 2 组件在 .NET MVC5 中工作？
【发布时间】：2017-02-10 17:08:47
【问题描述】：

我在 .NET MVC5 (Visual Studio 2015) 上使用 Angular 2，并且非常努力地结合了 kendo angular 2 组件，特别是 kendo-angular-buttons 为了这个问题。

我在这里上传了 - https://github.com/eithneh/KendoAngular2 - 一个可以编译和运行的骨架 angular 2 解决方案，但是当我取消注释时会中断

Import { ButtonsModule } from '@progress/kendo-angular-buttons';

在 boot.ts 中。

错误是多重的，主要是下面的变化，并且都在 d.ts 文件中

TS2300 重复标识符“只读” TS1005 '=' 预期

我已经尝试了许多类似问题的建议解决方案，主要是在 tsconfig.json 中玩弄 typescript 版本和 @angular 版本和排除（试图防止 d.ts 文件根据在线建议针对类似情况进行编译）。

我的出发点是按照http://www.telerik.com/kendo-angular-ui/getting-started/ 此处的说明使用 kendo ui 通过 angular cli（不是 .NET）创建 angular 2 项目，效果很好，然后我复制了 packages.json、tsconfig.json 和 app 的相关位.ts 从那里。

我应该放弃 .NET MVC5 中的 angular 2 Kendo UI 吗？谁能告诉我我做错了什么，或者指出任何可行的示例项目？

【问题讨论】：

我已经使用了这个blog.stevensanderson.com/2016/10/04/…，并且能够很容易地为 Angular2 组件添加 KendoUI。它是 MVC Core，而不是 MVC5，但也许它可以提供帮助？
谢谢@Vincent，我已经关注了该博客和模板，以防它提供任何指导。但是我的 MVC 5 项目使用 systemjs，而 MVC CORE 项目使用 webpack（用于模块加载），所以比较不那么容易。我认为我的问题在于 systemjs.config.js。我真的很想确认 .NET MVC 5 中的 Kendo UI angular 2 组件实际上是受支持的，然后我将非常感谢获得任何带有任何 kendo angular 2 组件的 MVC 5 项目的基本（完整）工作示例。
我看不出它不受支持的任何原因......它由客户端包组成，因此无论您的服务器环境如何，它都应该可以工作。我同意这很可能是一个包装问题，但我对 SystemJS 不太了解，所以无法提供更多帮助......
你试过这个答案吗？看起来他在 SystemJS 配置中的地图数组中添加了剑道线
如果您正在编写由 MVC Web 应用程序托管的单页应用程序，我建议您放弃它。只需使用 angular cli 来构建您的 SPA。如果需要，您仍然可以使用 Visual Studio 进行编码，但我发现 Visual Code 对 Nodejs 更友好。您仍然可以调用您在 ASP.NET 中编写的所有 REST 服务。部署时，您可以将 SPA 作为静态内容部署到您选择的 Web 服务器。

标签： angular asp.net-mvc-5 kendo-ui-angular2

【解决方案1】：

您可以在 .Net MVC 5 应用程序中为 Angular 2 组件使用 Kendo UI。

假设你使用的是systemjs，

首先，在您的 systemjs.config.js 中将 @progress 依赖项映射到相应的 node_modules 路径，然后引用包 main.js 文件。

例如：

paths: {
            'npm:': "node_modules/"
        },
   map: {
            ...,
            '@progress/kendo-angular-buttons': "npm:@progress/kendo-angular-buttons",
        },
packages: {
            '@progress/kendo-angular-buttons': {
                main: "./dist/npm/js/main.js",
                defaultExtension: "js"
            }

将 ButtonsModule 导入到相应的 Angular 模块中例如：

import {ButtonsModule} from "@progress/kendo-angular-buttons";

   @NgModule({
    imports: [
        ButtonsModule
    ],

假设模板组件声明正确，您现在应该能够在各自的模板中实现剑道按钮。

<button kendoButton (click)="onButtonClick()">Default</button>

【讨论】：

抱歉没有评估这个答案，我已经放弃并走了一条不同的路线，但是当有窗口时会记住尝试一下。