How to get Kendo ui angular 2 components to work in .NET MVC5?

Question

I'm on .NET MVC5 (Visual Studio 2015) with Angular 2, and have tried very hard to incorporate kendo angular 2 components, specifically kendo-angular-buttons for the sake of this question.

I've uploaded here - https://github.com/eithneh/KendoAngular2 - a skeleton angular 2 solution that compiles and runs, but breaks when I uncomment

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

in boot.ts.

The errors are multiple, mostly variations on below, and all in d.ts files

TS2300 Duplicate identifier 'readonly' TS1005 '=' expected

I've tried many suggested solutions from similar questions, mostly around toying with typescript version and @angular versions and excludes in tsconfig.json (trying to prevent d.ts files from being compiled per online advice for similar scenarios).

My starting point was to follow instruction here http://www.telerik.com/kendo-angular-ui/getting-started/ to create angular 2 project via angular cli (not .NET) with kendo ui, that worked fine and I then copied relevant bits of packages.json, tsconfig.json and app.ts from there.

Should I give up on angular 2 Kendo UI in .NET MVC5? Can anyone tell me what I'm doing wrong please, or point me to any sample project that works?

I have used this http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/ and was able to add KendoUI for Angular2 components quite easily. It is MVC Core, not MVC5, but maybe it can help? — Vincent V., Feb 14 '17 at 08:40
Thank you @Vincent, I have followed that blog and template, in case it would provide any guidance. But my MVC 5 project uses systemjs whereas the MVC CORE project uses webpack (for module loading) so it's not so easy to compare. I think my issue is with systemjs.config.js. I'd really like confirmation that Kendo UI angular 2 components in .NET MVC 5 is actually supported and then I'd be very grateful to get any basic (full) working example of an MVC 5 project with any kendo angular 2 component. — eithne, Feb 16 '17 at 17:27
I can't see any reason why it would be unsupported... It is made of client-side packages so it should work whatever your server environment is. I agree that it is most likely a packaging problem, but I dunno much about SystemJS so can't help much more... — Vincent V., Feb 16 '17 at 18:29
Have you tried this answer? Looks like he adds kendo lines in the map array in SystemJS config — Vincent V., Feb 16 '17 at 18:38
If you are writing a single page application which is being hosted by an MVC web application, I'd suggest you give up on that. Just use the angular cli to build your SPA. You can still use Visual Studio for coding if you want, but I find Visual Code much more Nodejs friendly. You can still call all your REST services that you've written in ASP.NET. When you deploy you can just deploy the SPA as static content to your web server of choice. — GlennSills, Feb 17 '17 at 20:30
BTW, the Kendo documentations suggests that it works a bit better with Webpack as opposed to SystemJS. — GlennSills, Feb 17 '17 at 20:31
Thanks all for your input. I like your suggestion re hosting in VS Code GlennSills, and will bear in mind for future endeavours. For the project in hand, it would require significant refactoring. Time constraints are pushing me to abandon the Angular2 Kendo UI component route for this MVC5 project, so I'm reverting to using ag-grid, mydatepicker and other alternative components that I've already successfully integrated. P.S. @Vincent V. did you intend to provide a link in your last comment? — eithne, Feb 21 '17 at 10:03
Yes, sorry! Look at the question, his system.config.js is different from yours I think, regarding the map array. But then again, I know nothing about SystemJS... http://stackoverflow.com/questions/39576887/kendo-ui-angular-systemjs-unexpected-token — Vincent V., Feb 21 '17 at 12:40

score 0 · Answer 1 · answered Mar 08 '17 at 16:29

You can consume Kendo UI for Angular 2 components in a .Net MVC 5 application.

Assuming you are using systemjs,

First, in your systemjs.config.js map the @progress dependency to the appropriate node_modules path, then reference the package main.js file.

e.g:

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

Import the ButtonsModule into the respective Angular Module e.g:

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

   @NgModule({
    imports: [
        ButtonsModule
    ],

You should now be able to implement a kendo button in your respective template, assuming that templates component is declared correctly.

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

Apologies for not having assessed this answer, I had abandoned and gone a different route, but will bear in mind to try it out when there's a window again. — eithne, Nov 10 '17 at 14:27

How to get Kendo ui angular 2 components to work in .NET MVC5?

1 Answers1