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，我最终得到了相同的结果。 似乎在 plunker 使用中使用的代码 '@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 install --save @progress/kendo-angular-grid 但结果不是网格，只是：

产品名称(0) 单价(1) 柴18

Answer 1

我的 Angular cli 脚手架项目未能安装 kendo ui 控件。 我尝试使用 Angular 快速启动项目创建项目，我可以安装 kendo ui 网格/对话框，但似乎没有任何效果。仅显示具有基本布局的文本。 帮助....

Answer 2

您应该使用@progress 路径而不是@telerik 路径。 @telerik 仅用于演示目的。如果网格正确呈现（没有错误并且为您的网格生成了适当的 kendo ui 标签），我认为您没有正确导入样式。对于每个网格（和依赖项），您需要包含 css 文件。

所以在作为 webpack 条目的 vendor.ts 文件中，我添加了：

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

我可以确认网格与 Webpack 一起正常工作。

Answer 3

它适用于 web pack。在您的模块中，您必须像这样指定 kendo 组件：

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 4

我遇到了同样的问题。我按照剑道教程进行操作，按钮正常工作，但所有其他 UI 小部件都没有正确显示。我正在使用 angular-cli 方法并执行以下操作来解决此问题：

如剑道入门教程中所述，安装样式 css npm install -S @telerik/kendo-theme-default

但是，我没有从组件中引用 .css，而是将其放在 angular-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 5

我也遇到了同样的问题，但还没有找到解决办法？ 我在 angular-cli.json 文件中添加了 css。 不仅页眉和页脚模板不起作用，而且当我尝试添加 GroupHeaderTemplate 时，我收到以下控制台错误： “未处理的承诺拒绝：模板解析错误： 无法绑定到“组”，因为它不是“剑道网格”的已知属性。 1. 如果'kendo-grid'是一个Angular组件并且它有'group'输入，那么验证它是这个模块的一部分。”

是的，我确实添加了 GridModule 导入..

Answer 6

请按照解决方案：

ng 添加@progress/kendo-angular-grid

Answer 7

Kendo 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

@progress/kendo-angular-grid: 0.3.3

看看这是否有帮助。