Angular 6集成ag-grid构建后运行报错：无法读取'AG_GRID'属性

我之前处理过好几个类似的案例，这个报错本质上是生产构建时的代码优化（Tree Shaking）误删了ag-grid的核心初始化代码，或者是ag-grid模块没有正确导入导致全局AG_GRID对象未被初始化。下面是几个经过验证的解决方案，按优先级尝试：

1. 确保正确导入AgGridModule并调用forRoot() #

ag-grid的Angular模块需要通过forRoot()方法初始化全局配置，生产构建时如果只导入AgGridModule而不调用这个方法，会导致核心的AG_GRID对象无法被注册。

在你的根模块（比如AppModule）中修改导入代码：

import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [
    // ...其他依赖模块
    AgGridModule.forRoot({
      // 可选：配置全局默认参数，比如主题、加载提示等
      defaultColDef: {
        sortable: true,
        filter: true
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果是在共享模块中导入ag-grid，记得在共享模块的exports数组中导出AgGridModule，并且只在根模块中调用forRoot()，其他模块直接使用AgGridModule即可。

2. 调整Angular构建的优化配置 #

Angular生产构建的Tree Shaking机制会对CommonJS模块做严格的筛选，而ag-grid的部分依赖是CommonJS格式，容易被误判为无用代码移除。你可以在angular.json中配置允许这些依赖：

找到项目的构建配置（projects -> [你的项目名] -> architect -> build -> options），添加如下配置：

"allowedCommonJsDependencies": [
  "ag-grid",
  "ag-grid-angular"
],
"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": true
  },
  "fonts": true
}

这个配置告诉Angular不要对ag-grid相关的包做严格的Tree Shaking，确保核心代码被保留。

3. 检查ag-grid版本与Angular 6的兼容性 #

Angular 6对依赖版本有严格要求，ag-grid的版本必须和Angular 6兼容。建议使用ag-grid 19.x~21.x的版本，并且确保ag-grid和ag-grid-angular的版本完全一致：

查看你的package.json，确保类似这样的版本配置：

"dependencies": {
  // ...其他依赖
  "ag-grid": "^19.1.4",
  "ag-grid-angular": "^19.1.4",
  "@angular/core": "^6.1.0"
}

如果版本不匹配，先卸载现有包，重新安装对应版本：

npm uninstall ag-grid ag-grid-angular
npm install ag-grid@19.1.4 ag-grid-angular@19.1.4 --save

4. 手动引入ag-grid核心脚本（备选方案） #

如果上面的方法都无效，可以尝试在构建配置中手动引入ag-grid的核心JS文件，强制加载这部分代码：

在angular.json的scripts数组中添加：

"scripts": [
  "./node_modules/ag-grid/dist/ag-grid.min.js"
]

这样可以绕过Tree Shaking机制，确保ag-grid的核心代码被加载到最终的构建产物中。

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