角度2 @進度/剣道グリッドはウェブパックでは機能しませんか？

Question

http://www.telerik.com/kendo-angular-ui/getting-startedに基づいて私はwebpack QSで始まり、ボタンをうまく表示するようにしました。 その後、http://www.telerik.com/kendo-angular-ui/components/grid/チュートリアルを開始しました。 グリッドの例では、周囲にグリッドのないテキストだけが表示されていました。 この例は、systemJSのプランナーで動作するように見えました。 これは、webpackで@ progress/kendo-angular-gridが動作しないことを意味しますか？

または、私が間違っていることを教えてください。 ありがとうございます

バニラ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'、 私のコードではアクセスできません。 NPM進捗/剣道-角度グリッド @ --saveをインストールしかし、結果はただ、グリッドではありません： は、だから私はいただきました！node_modules中/後に使用

商品名（0）単価（1） チャイ18

Answer 1

私のangular cliスキャフォールドプロジェクトは、剣道のコントロールをインストールできませんでした。 角クイックスタートプロジェクトを使用してプロジェクトを作成しようとしましたが、剣道UIグリッド/ダイアログをインストールできましたが、何も動作していないようです。基本的なレイアウトのテキストが表示されました。 help ....

Answer 2

@telerikパスの代わりに@progressパスを使用する必要があります。 @telerikはデモ用です。グリッドが正しくレンダリングされていれば（エラーはなく、適切な剣道UIがグリッドに生成されます）、スタイルを正しくインポートしていないと思います。各グリッド（および依存関係）に対して、cssファイルをインクルードする必要があります。

のでWebPACKのエントリである私のvendor.tsファイルで、私が追加しました：

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

私はグリッドはWebPACKので正常に動作している確認することができます。

Answer 3

剣道UIグリッドは（WebPACKのを試していない）場合のsystemJS

これは私のコンポーネントはthis-

ようGridModuleをインポートし、AppModuleでlike-

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 
    }]; 
} 

をどのように見えるかある中で私のために正常に動作します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' 
    }, 
    ....... 

で

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 { } 

2.0決勝：

そしてindex.html-

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

出力のは同類が

Angular2バージョンは -

私の環境をthis-見えます。進捗状況/剣道-角度グリッド@ 0

：この場合に役立ちます

0.3.3を参照してください。

Answer 4

ウェブパックで動作します。あなたのhome.component.htmlで

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) {} 
} 

、その後：

<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

私はそれを備えました問題。私は剣道のチュートリアルに従っていましたが、ボタンは問題なく動作しましたが、他のすべてのUIウィジェットは正しく表示されていませんでした。私は、角度-cliのアプローチを使用していますが、この問題解決するには、以下のなかった：剣道で説明したように、チュートリアル入門

を、-S

telerik /剣道-テーマのデフォルト@をインストール NPMのCSSスタイルをインストール

しかし、むしろComponentからの.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を追加しようとすると、次のコンソールエラーが表示されます。 "未処理プロミス拒否：テンプレート解析エラー： '1. 'kendo-grid'がAngularコンポーネントで、 'group'入力がある場合、それがこのモジュールの一部であることを確認してください。

そして、はい、私は更新入門チュートリアルでは、角度CLIを使用していますので、WebPACKの2を参照してくださいhttp://www.telerik.com/kendo-angular-ui/getting-