如何在Angular 4中使用Kendo-Grid

Question

我想在Angular4上使用Kendo-Grid，但我一直收到这个错误：

Uncaught Error: Template parse errors:
'Kunden-grid' is not a known element:
1. If 'Kunden-grid' is an Angular component, then verify that it is part of this module.
2. If 'Kunden-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<h1>{{title}}</h1>
<searchfield></searchfield>
[ERROR ->]<Kunden-grid></Kunden-grid>

我按照http://www.telerik.com/kendo-angular-ui/getting-started/#installation上的指南安装了Kendo-angular-ui。app.component：

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Kontaktsuche';
}

和app.component的模板：

<h1>{{title}}</h1>
<searchfield></searchfield>
<Kunden-grid></Kunden-grid>

包含栅格的组件：

import {Component} from '@angular/core';
@Component({
    selector:'Kunden-grid',
    template: `
    <div ngIf="gridData">
    <kendo-grid [data]="gridData" [height]="500">
        <kendo-grid-column field="ID" title="ID" width="5%"></kendo-grid-column>
        <kendo-grid-column field="Name1" title="Name" width="20%"></kendo-grid-column>
        <kendo-grid-column field="PLZ" title="Plz" width="10%"></kendo-grid-column>
        <kendo-grid-column field="Ort" title="Ort" width="20%></kendo-grid-column>
        <kendo-grid-column field="Strasse" title="Strasse" width="15%"></kendo-grid-column>
        <kendo-grid-column field="Land" title="Land" width="5%"></kendo-grid-column>
        <kendo-grid-column field="Telefon1" title="Telefon" width="15%"></kendo-grid-column>
        <kendo-grid-column field="Telefax" title="Telefax" width="15%"></kendo-grid-column>
    </kendo-grid>
    </div>
    `
})
export class KundenGrid {
    private gridData: any[] = [];
    public setGridData(Data: any[]){
        this.gridData = Data;        
    }
}


I changed the app.module.ts to:

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
    import { AppComponent }  from './app.component';
    import { SearchFieldComponent} from './searchfield.component';
    import { FormsModule} from '@angular/forms'; 
    import { searchService} from './search.service';
    import { HttpModule} from '@angular/http';
    import {GridModule} from '@progress/kendo-angular-grid';


    @NgModule({
      imports:      [BrowserAnimationsModule , BrowserModule, FormsModule , HttpModule , GridModule ],
      declarations: [ AppComponent,
                    SearchFieldComponent],
      providers:[searchService],
      bootstrap:    [ AppComponent ]
    })
    export class AppModule { }

我还尝试将@progress/kendo-angular-grid/dist/es/main.js包含到.angular-cli.json中，但这也没有帮助。有没有像Systemjs.cofig这样的东西，我必须包含kendo-grid-package？