Angular 14集成ag-grid遇ClientSideRowModelModule类型不兼容错误

在Angular 14中搭建ag-grid并测试示例数据时，遇到与ClientSideRowModelModule相关的类型不兼容错误，以下是问题详情及解决方案：

依赖版本 #

当前package.json中的相关依赖：

"dependencies": {
  "@ag-grid-community/angular": "^28.1.1",
  "@ag-grid-community/client-side-row-model": "^28.1.1",
  "@ag-grid-community/core": "^28.1.1",
  "@ag-grid-enterprise/all-modules": "^27.3.0",
  "ag-grid-angular": "^28.1.1",
  "ag-grid-community": "^28.1.1",
  ...
}

模板代码 #

<ag-grid-angular #agGrid style="height: 500px;" class="ag-theme-alpine"
[rowData]="rowData"
[defaultColDef]="defaultColDef"
[modules]="modules"  <!-- 问题位置 -->
[columnDefs]="[]"
[ensureDomOrder]="true"
[pagination]="true"
(rowDataChanged)="onGridReady($event)"
[pagination]="true"
[paginationPageSize]="paginationPageSize"
[enableBrowserTooltips]="true">
</ag-grid-angular>

组件逻辑代码 #

import { Component, ViewChild } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { Module } from 'ag-grid-community';
import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';

interface Run {
  name: string;
  groupId: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {

  modules: Module[] = [ClientSideRowModelModule]; // 错误行

  defaultColDef = {
    flex: 1,
    resizable: true,
    sortable: true,
    minWidth: 100,
    filter: true,
    filterParams: {
      buttons: ['cancel', 'reset', 'apply'],
      closeOnApply: true,
      inRangeInclusive: true,
      suppressAndOrCondition: true,
    },
  };

  @ViewChild('agGrid') agGrid: AgGridAngular;

  rowData: Run[];
  paginationPageSize = 20;

  onGridReady(_event: any) {
    this.agGrid.columnApi.autoSizeAllColumns(true);
  }

  constructor() {
    this.rowData.push({ name: 'tanzeel', groupId: 100 });
  }
}

报错信息 #

Error: src/app/app.component.ts:29:24 - error TS2322: Type 'import("C:/Users/TanzeelMirza/Documents/angular14/i.../node_modules/@ag-grid-community/core/dist/cjs/es5/interfaces/iModule").Module' is not assignable to type 'import("C:/Users/TanzeelMirza/Documents/angular14/.../node_modules/ag-grid-community/dist/lib/interfaces/iModule").Module'.
Types of property 'rowModels' are incompatible.
Type '{ [name: string]: new () => import("C:/Users/TanzeelMirza/Documents/angular14/.../node_modules/@ag-grid-community/core/dist/cjs/es5/interfaces/iRowModel").IRowModel; } | undefined' is not assignable to type '{ [name: string]: new () => import("C:/Users/TanzeelMirza/Documents/angular14/.../node_modules/ag-grid-community/dist/lib/interfaces/iRowModel").IRowModel; } | undefined'.
...mmunity/core/dist/cjs/es5/gridApi").GridApi' is
not assignable to type 'import("C:/Users/TanzeelMirza/Documents/angular14/.../node_modules/ag-grid-community/dist/lib/gridApi").GridApi'.
Types have separate declarations of a private property 'immutableService'.

解决方案 #

1. 清理重复依赖 #

移除package.json中旧版非scoped的ag-grid依赖：ag-grid-angular和ag-grid-community，官方已推荐使用@ag-grid-community/*系列scoped包，两者并存会导致类型定义冲突。

2. 统一所有ag-grid包版本 #

将@ag-grid-enterprise/all-modules的版本从^27.3.0改为^28.1.1，确保所有ag-grid相关包的版本完全一致，版本不匹配是类型不兼容的核心原因。

3. 修正类型导入路径 #

将组件中Module的导入从ag-grid-community改为@ag-grid-community/core，scoped包的类型定义统一在该包中：

import { Module } from '@ag-grid-community/core';

4. 修复rowData初始化问题 #

rowData未初始化就调用push会报错，需先赋值为空数组：

rowData: Run[] = []; // 初始化空数组

constructor() {
  this.rowData.push({ name: 'tanzeel', groupId: 100 });
}

5. 重新安装依赖 #

执行以下命令清理并重新安装依赖：

rm -rf node_modules package-lock.json # 若使用yarn则删除yarn.lock
npm install

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