无法让“Kendo UI for Angular 2”组件工作

Question

I'm attempting to build a demo application that utilizes the "Kendo UI for Angular 2" controls, but I can only seem to get the Button control to work. All of the other controls either display wrong or do not display at all. I could really use some help so I can figure out if the product is worth the cost for a new long-term project we are starting up.

In the example below, I'm using Angular 2 to display their button and a dropdown list. Only the button works. Please help me get this sample working. I've spent way too long trying to figure this out. Thanks!

package.json (truncated for brevity)

"dependencies": {
   ...
   "@progress/kendo-angular-buttons": "^0.10.2",
   "@progress/kendo-angular-dropdowns": "^0.10.2",
   ...

systemjs.config.js (truncated for brevity)

map: {
  app: 'app',
  'rxjs': 'npm:rxjs',
  '@progress': 'npm:@progress',
  '@telerik': 'npm:@telerik',
  ...
},
packages: {
  "@progress/kendo-angular-dropdowns": { main: './dist/npm/js/main.js', defaultExtension: 'js' },
  "@progress/kendo-angular-buttons": { main: './dist/npm/js/main.js', defaultExtension: 'js' },    
  '@telerik/kendo-dropdowns-common': { main: './dist/npm/js/main.js', defaultExtension: 'js' },
  ...
}

app.module.ts

// Application
import { AppComponent }  from './app.component';

// Misc Modules
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgModule } from '@angular/core';

// Kendo Controls
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

// Test Pages
import { KButtonComponent } from './components/k.button.component'
import { KDropDownListComponent } from './components/k.dropdownlist.component'

@NgModule({
    imports: [
        BrowserModule, FormsModule, ReactiveFormsModule, HttpModule, ButtonsModule, DropDownsModule ],
    declarations: [ AppComponent, KButtonComponent, KDropDownListComponent ],
    providers: [],
    bootstrap: [ AppComponent ]
})

export class AppModule { }

app.component.ts

            import { Component } from '@angular/core';

            // Kendo Controls
            import { ButtonsModule } from '@progress/kendo-angular-buttons';
            import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <button kendoButton (click)="onButtonClick()" [primary]=true>Button!</button> This works!
        <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist> This doesn't even display.
    `,
    styleUrls: [ '../node_modules/@progress/kendo-angular-buttons/dist/npm/css/main.css', '../node_modules/@progress/kendo-angular-dropdowns/dist/npm/css/main.css' ]
})

export class AppComponent {
   listItems: Array<string> = ['This', 'is', 'really', 'upsetting'];

   onButtonClick() {
        alert('The only working Kendo component');
    }
}

Answer 1

Install the default Kendo theme ( https://www.npmjs.com/package/@telerik/kendo-theme-default ) using the command npm install --save @telerik/kendo-theme-default .

Specify the CSS file in your index.html and all the controls will display as intended.

<link rel="stylesheet" href="./node_modules/@telerik/kendo-theme-default/dist/all.css">

Answer 2

Everything looks correct except for your systemjs.config.js configuration. Your package definitions need to match the maps to the libraries you defined. This is my configuration and works, just replace my grid component definition with your component definitions.

systemjs.config.js

 // map tells the System loader where to look for things map: { 'app': 'dist', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', ... '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl', '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid', '@telerik/kendo-intl': 'npm:@telerik/kendo-intl', }, // packages tells the System loader how to load when no filename and/or no extension packages: { 'app': { main: './app.main.js', defaultExtension: 'js' }, ... '@progress/kendo-angular-intl': { main: './dist/npm/js/main.js', defaultExtension: 'js' }, '@progress/kendo-angular-grid': { main: './dist/npm/js/main.js', defaultExtension: 'js' }, '@telerik/kendo-intl': { main: './dist/npm/js/main.js', defaultExtension: 'js' } } });