Angular 2 @ progress/kendo-angular-grid不適用於webpack？

Question

基於http://www.telerik.com/kendo-angular-ui/getting-started我開始使用webpack QS，並且按鈕顯示正常。 然後我開始了http://www.telerik.com/kendo-angular-ui/components/grid/教程。 所有網格示例都顯示爲僅包含網格的文本。 這些例子似乎與systemJS一起工作。 這是否意味着@ progress/kendo-angular-grid不能與webpack一起使用？

或者也許有提示告訴我我做錯了什麼？ 謝謝

剛剛開始與香草SystemJS的一切，我結束了相同的結果。 似乎代碼中使用的代碼 '@progress'：'http://www.telerik.com/kendo-angular-ui/npm/node_modules/@progress'， '@telerik'：'http://www.telerik.com/kendo-angular-ui/npm/node_modules/@telerik'， 但我的代碼無法訪問它。 於是我就用什麼在node_modules /後： NPM安裝--save @進度/劍道棱角網 但結果不是一個網格，只是：

產品名稱（0）單價（1） 柴18

Answer 1

我的角度cli腳手架項目未能安裝kendo ui控件。 我試圖使用角度快速啓動項目創建項目，我可以安裝kendo ui網格/對話框，但似乎沒有任何工作。只是顯示基本佈局的文字。 幫助....

Answer 2

您應該使用@progress路徑而不是@telerik路徑。 @telerik僅用於演示目的。如果網格呈現正確（沒有錯誤，併爲您的網格生成相應的kendo ui標籤），我認爲您沒有正確導入樣式。對於每個網格（和依賴），您需要包含css文件。

我vendor.ts文件，它是一個入門的WebPack

所以，我說：

import '../node_modules/@progress/kendo-angular-grid/dist/npm/css/main.css'; 

我可以確認電網與的WebPack正常工作。

Answer 3

劍道UI電網工作正常，我的情況下，systemJS（不帶的WebPack試過）

這是我的組件看起來如何喜歡 -

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

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h5>My First Kendo UI grid with Angular 2 App</h5> 

     <h5>kendo-grid</h5> 

     <kendo-grid [data]="gridData"> 
      <kendo-grid-column field="ProductName"> 
       <template kendoHeaderTemplate let-column let-columnIndex="columnIndex"> 
        {{column.field}}({{columnIndex}}) 
       </template> 
      </kendo-grid-column> 
      <kendo-grid-column field="UnitPrice"> 
       <template kendoHeaderTemplate let-column let-columnIndex="columnIndex"> 
        {{column.field}}({{columnIndex}}) 
       </template> 
      </kendo-grid-column> 
     </kendo-grid> 
    ` 
}) 
export class AppComponent { 

     private gridData: any[] = [{ 
     "ProductID": 1, 
     "ProductName": "Chai", 
     "UnitPrice": 18.0000, 
     "Discontinued": true 
    }, { 
     "ProductID": 2, 
     "ProductName": "Chang", 
     "UnitPrice": 19.0000, 
     "Discontinued": false 
    }, { 
     "ProductID": 3, 
     "ProductName": "Aniseed Syrup", 
     "UnitPrice": 10.0000, 
     "Discontinued": false 
    }, { 
     "ProductID": 4, 
     "ProductName": "Chef Anton's Cajun Seasoning", 
     "UnitPrice": 22.0000, 
     "Discontinued": false 
    }, { 
     "ProductID": 5, 
     "ProductName": "Chef Anton's Gumbo Mix", 
     "UnitPrice": 21.3500, 
     "Discontinued": false 
    }, { 
     "ProductID": 6, 
     "ProductName": "Grandma's Boysenberry Spread", 
     "UnitPrice": 25.0000, 
     "Discontinued": false 
    }]; 
} 

在的AppModule，進口GridModule喜歡這個 -

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { GridModule } from '@progress/kendo-angular-grid'; 

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

@NgModule({ 
    imports: [ BrowserModule, GridModule], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

在systemjs.config.js-

map: { 
    // our app is within the app folder 
    app: 'app', 

    '@progress/kendo-angular-grid': 'npm:@progress/kendo-angular-grid', 
    '@progress/kendo-angular-intl': 'npm:@progress/kendo-angular-intl', 
    '@telerik/kendo-intl': 'npm:@telerik/kendo-intl', 

    ....... 

    // packages tells the System loader how to load when no filename and/or no extension 
packages: { 
    'npm:@progress/kendo-angular-grid': { 
    main: './dist/npm/js/main.js', 
    defaultExtension: 'js' 
    }, 
    'npm:@progress/kendo-angular-intl': { 
    main: './dist/npm/js/main.js', 
    defaultExtension: 'js' 
    }, 
    'npm:@telerik/kendo-intl': { 
    main: './dist/npm/js/main.js', 
    defaultExtension: 'js' 
    }, 
    ....... 

而且在index.html-

<link rel="stylesheet" href="../node_modules/@progress/kendo-angular-grid/dist/npm/css/main.css"> 

輸出看起來喜歡這個 -

我的環境是 -

Angular2版本：最後2.0。0

@進度/劍道棱角網：0.3.3

看看這會有所幫助。

Answer 4

它適用於網絡包。在您的模塊中，你必須像這樣指定劍道組件：

import { NgModule, ApplicationRef } from '@angular/core'; 
.......... 
import { GridModule } from '@progress/kendo-angular-grid'; 

@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ App,About,Home,XLarge], 
    imports: [ BrowserModule, FormsModule, HttpModule, GridModule, RouterModule.forRoot(ROUTES, { useHash: true }) ], 
    providers: [ // expose our Services and Providers into Angular's dependency injection 
     ENV_PROVIDERS, 
     APP_PROVIDERS 
     ] 
}) 
export class AppModule { 
     constructor(public appRef: ApplicationRef, public appState: AppState) {} 
} 

，然後在home.component.html：

<kendo-grid 
    [data]="gridData" 
    [scrollable]="'virtual'" 
    [rowHeight]="36" 
    [height]="300"> 
</kendo-grid> 

的GridData是任何[]數組，你可以在home.component定義.TS

不過在此之前，你應該遵循以下步驟：

>npm login --registry=https://registry.npm.telerik.com/ --scope=@progress 
>Username : ******* 
>Password : ***** 
>Email  : your email 


>npm install --save @progress/kendo-angular-grid 

you can also install other component like this 

>npm install --save @progress/kendo-angular-buttons 
>npm install --save @progress/kendo-angular-dropdowns 
>npm install --save @progress/kendo-angular-charts 

>npm install 
>npm start 

Answer 5

我有同樣的問題。我遵循Kendo教程，並且按鈕的運行沒有任何問題，但所有其他UI小部件都沒有正確顯示。我現在用的角CLI方式和做了以下解決這個問題：

如劍道描述的入門教程，安裝CSS 故宮的樣式安裝-S @ Telerik的/劍道主題默認

但是，而不是從組件引用的CSS，我把它放在角cli.json文件：

{ 
     "project": { 
     "version": "1.0.0-beta.17", 
     "name": "kairos-cli" 
     }, 
     "apps": [ 
     { 
      "root": "src", 
      "outDir": "dist", 
      "assets": "assets", 
      "index": "index.html", 
      "main": "main.ts", 
      "test": "test.ts", 
      "tsconfig": "tsconfig.json", 
      "prefix": "app", 
      "mobile": false, 
      "styles": [ 
      "styles.css", 
      "../node_modules/@telerik/kendo-theme-default/dist/all.css" 
      ], 
      ... 

Answer 6

我有同樣的問題，但仍然沒有找到一個解決方案？ 我在我的angular-cli.json文件中添加了css。 不僅頁眉和頁腳模板不起作用，而且當我嘗試添加GroupHeaderTemplate時，出現以下控制檯錯誤： 「未處理的Promise拒絕：模板解析錯誤： 無法綁定到'group'因爲它不是'kendo-grid'的已知屬性 1.如果'kendo-grid'是一個Angular組件並且它有'group'輸入，那麼請驗證它是否是該模塊的一部分。

是的，我沒有添加GridModule進口..