Angular 5中无法添加Kendo Grid增删改命令指令求助

你照着Kendo Grid外部编辑示例实现功能时遇到的这个错误，本质是Kendo组件初始化时找不到必需的依赖配置，我给你几个实用的排查和解决方向：

• 确保导入所有必需的模块
  kendoGridAddCommand/Edit/Remove这类命令按钮依赖GridModule和ButtonsModule，而且Kendo大部分组件都需要动画模块支持，一定要在你的NgModule里完整导入这些：

  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { GridModule } from '@progress/kendo-angular-grid';
  import { ButtonsModule } from '@progress/kendo-angular-buttons';
  
  @NgModule({
    imports: [
      // ...你的其他基础模块
      BrowserAnimationsModule,
      GridModule,
      ButtonsModule
    ]
  })
  export class YourModule { }
  

  别漏掉BrowserAnimationsModule，很多人忽略这个会触发各种奇怪的初始化错误。

• 核对Angular与Kendo UI的版本兼容性
  你用的是Angular 5，必须确保安装的Kendo UI Angular版本是兼容Angular 5的（比如@progress/kendo-angular-grid的3.x系列版本）。打开package.json检查依赖版本，如果不匹配，调整到兼容版本后，删除node_modules和package-lock.json，重新执行npm install。举个兼容的版本示例：

  "@progress/kendo-angular-grid": "^3.12.0",
  "@angular/core": "^5.2.11"
  

• 检查模板中指令的使用位置是否正确
  命令按钮指令必须放在Kendo Grid指定的模板容器内：编辑/删除按钮要放在kendoGridCellTemplate里，新增按钮要放在kendoGridToolbarTemplate里，示例如下：

  <kendo-grid [data]="gridData">
    <!-- 其他列配置 -->
    <kendo-grid-column>
      <ng-template kendoGridCellTemplate let-dataItem>
        <button kendoGridEditCommand>Edit</button>
        <button kendoGridRemoveCommand>Remove</button>
      </ng-template>
      <ng-template kendoGridToolbarTemplate>
        <button kendoGridAddCommand>Add New</button>
      </ng-template>
    </kendo-grid-column>
  </kendo-grid>
  

  如果把指令放在错误的位置（比如直接放在kendo-grid标签外），会导致指令无法获取必需的上下文依赖，从而触发rtl相关的错误。

• 清理依赖缓存重新安装
  偶尔会出现依赖安装缓存损坏的情况，执行以下命令重置依赖：

  rm -rf node_modules package-lock.json
  npm install
  

内容的提问来源于stack exchange，提问作者user2849331