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进口..