無法讓「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' 
 
    } 
 
    } 
 
});