无法让“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

安装使用命令npm install --save @telerik/kendo-theme-defaultdefault Kendo theme（https://www.npmjs.com/package/@telerik/kendo-theme-default）。

在index.html中指定CSS文件，所有控件都将按预期显示。

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

Answer 2

一切看起来除了你systemjs.config.js配置正确。您的软件包定义需要将映射与您定义的库匹配。这是我的配置和工作原理，只需将我的网格组件定义替换为组件定义即可。

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