导入KENDO_GRID时出现Angular独立组件导入错误

问题原因 #

KENDO_GRID是Kendo Angular Grid提供的模块集合数组，直接将其加入独立组件的imports数组会导致数组嵌套，Angular编译器无法静态分析这种结构，因此抛出'imports' must be an array of components, directives, pipes, or NgModules错误。

解决方法 #

使用ES6扩展运算符...将KENDO_GRID数组展开，把其中的模块逐个加入imports数组：

修正后的代码 #

/* eslint-disable max-len */
import { Component } from '@angular/core';
import { KENDO_BUTTON } from '@progress/kendo-angular-buttons';
import { KENDO_TEXTBOX } from '@progress/kendo-angular-inputs';
import { DrawerModule, KENDO_GRIDLAYOUT } from '@progress/kendo-angular-layout';
import { KENDO_GRID } from '@progress/kendo-angular-grid';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [
    DrawerModule,
    KENDO_TEXTBOX,
    KENDO_BUTTON,
    KENDO_GRIDLAYOUT,
    ...KENDO_GRID // 用扩展运算符展开数组
  ],
  templateUrl: './dashboard.component.html',
  styleUrl: './dashboard.component.scss'
})
export class DashboardComponent {

}

补充说明 #

Kendo Angular的这类KENDO_*集合（如KENDO_BUTTON、KENDO_TEXTBOX）部分是单个模块或组件，而KENDO_GRID是包含多个相关模块的数组，因此必须展开后才能在独立组件的imports中使用，确保数组内都是Angular可识别的模块/组件/指令/管道。

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