Angular 18集成ag-grid报错：无法读取undefined的addEventListener属性

本地通过ng serve运行时AG Grid功能正常，但部署到现有页面后出现以下错误：

TypeError: Cannot read properties of undefined (reading 'addEventListener')
报错来源：ag-grid-community/dist/package/main.esm.mjs 第37866行

报错代码片段：

function addEventListener(beans, eventType, listener) {
  beans.apiEventService.addEventListener(eventType, listener);
}

以下是针对性的排查和解决步骤：

• 检查AG Grid模块的正确导入
  在Angular模块或独立组件中，确保完整导入AG Grid模块并初始化：

  // 模块中导入
  import { AgGridModule } from 'ag-grid-angular';
  
  @NgModule({
    imports: [
      // 其他依赖模块
      AgGridModule.withDefaultModule()
    ]
  })
  export class AppModule { }
  
  // 独立组件中导入
  @Component({
    imports: [AgGridModule.withDefaultModule()],
    // 其他组件配置
  })
  export class YourGridComponent { }
  

  避免仅导入ag-grid-angular而未调用withDefaultModule()或withComponents()，这会导致AG Grid内部服务未正确注入。

• 调整构建优化配置
  打开angular.json，检查构建环节的优化设置，防止AG Grid核心代码被tree shaking误删：

  "architect": {
    "build": {
      "options": {
        "optimization": {
          "scripts": true,
          "styles": true,
          "fonts": true
        },
        "allowedCommonJsDependencies": [
          "ag-grid-community",
          "ag-grid-angular"
        ]
      }
    }
  }
  

  可临时将optimization设为false重新构建部署，验证是否因优化导致代码缺失。

• 隔离现有页面的环境冲突
  现有页面的AngularJS版本AG Grid可能与Angular版AG Grid存在全局变量冲突：

  • 确保部署时两个版本的AG Grid脚本完全隔离，避免共享全局命名空间
  • 在AG Grid组件上启用Shadow DOM隔离环境：

    @Component({
      encapsulation: ViewEncapsulation.ShadowDom,
      // 其他组件配置
    })
    export class YourGridComponent { }
    

• 确保AG Grid初始化时机正确
  避免在AG Grid未完全初始化时调用API：

  • 用*ngIf控制组件渲染，确保数据或配置准备完成后再加载：

    <ag-grid-angular
      *ngIf="gridConfigReady"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
      (gridReady)="onGridReady($event)"
    ></ag-grid-angular>
    

  • 所有依赖AG Grid API的操作，统一放在gridReady回调中执行：

    onGridReady(params: GridReadyEvent) {
      // 在这里进行API相关操作，比如添加事件监听
      params.api.addEventListener('rowClicked', this.handleRowClick);
    }
    

• 核对版本兼容性
  尝试升级AG Grid到32.x系列的最新稳定版，或确认Angular 18.2.0与AG Grid 32.1.0的兼容性匹配，部分版本组合可能存在隐性初始化问题。

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