Не удается получить компоненты «Kendo UI for Angular 2»

Question

Я пытаюсь создать демонстрационное приложение, которое использует элементы управления «Kendo UI for Angular 2», но я могу только заставить управление Button работать. Все остальные элементы управления отображаются неправильно или вообще не отображаются. Я мог бы действительно использовать некоторую помощь, поэтому я могу выяснить, стоит ли продукт стоить для нового долгосрочного проекта, который мы запускаем.

В приведенном ниже примере я использую Angular 2 для отображения их кнопки и выпадающего списка. Работает только кнопка. Пожалуйста, помогите мне получить этот образец. Я слишком долго пытался понять это. Спасибо!

package.json (усечены для краткости)

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

systemjs.config.js (усечены для краткости)

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

Установка default Kendo theme (https://www.npmjs.com/package/@telerik/kendo-theme-default) с помощью команды npm install --save @telerik/kendo-theme-default.

Укажите файл CSS в вашем index.html, и все элементы управления будут отображаться в соответствии с назначением.

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

Answer 2

Все выглядит правильно для вашей конфигурации systemjs.config.js исключением. Ваши определения пакетов должны соответствовать картам указанным вами библиотекам. Это моя конфигурация и работает, просто замените определение моей grid-компоненты на ваши определения компонентов.

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' 
 
    } 
 
    } 
 
});