基于AngularJS 1.5的项目中ag-grid 14.0.0加载异常求助

嘿，我刚帮几个朋友解决过AngularJS 1.5 + ag-Grid 14.0.0的注入问题，这个[$injector:modulerr]错误链本质就是模块依赖没配置对，咱们一步步来排查修复：

这个错误从main→app→app.contestants逐层报错，90%的概率是ag-Grid的AngularJS适配模块没正确引入依赖，或者资源加载顺序搞反了。

第一步：先把资源加载顺序搞对 #

在你的入口HTML里，必须保证加载顺序是：AngularJS核心 → ag-Grid核心 → ag-Grid AngularJS适配层 → 你的项目文件。举个例子：

<!-- AngularJS 核心库 -->
<script src="path/to/angular.js"></script>
<!-- ag-Grid 核心文件 -->
<script src="path/to/ag-grid.js"></script>
<!-- 关键！ag-Grid和AngularJS绑定的适配文件 -->
<script src="path/to/ag-grid-angular.js"></script>
<!-- 你的项目文件按依赖顺序加载 -->
<script src="main.js"></script>
<script src="app.module.js"></script>
<script src="contestants.module.js"></script>
<script src="contestants.component.js"></script>

ag-Grid 14.0.0必须单独引入ag-grid-angular.js，这是和AngularJS联动的核心，别漏了。

第二步：逐个检查模块依赖声明 #

这是最容易踩坑的地方，每个模块都要把依赖写对：

1. contestants.module.js：这个模块必须依赖ag-Grid的AngularJS模块agGrid（注意是驼峰命名，别写成ag-grid）

angular.module('app.contestants', ['agGrid'])
  .component('contestants', { /* 组件定义 */ });

2. app.module.js：要把app.contestants作为依赖引入

angular.module('app', ['app.contestants']);

3. main.js：依赖顶层的app模块

angular.module('main', ['app'])
  // 这里的配置/路由代码确保没有语法错误

第三步：组件内正确使用ag-Grid #

在contestants.component.js里，要正确初始化表格配置，比如：

function ContestantsController() {
  var vm = this;
  // 初始化ag-Grid配置
  vm.gridOptions = {
    columnDefs: [
      { headerName: '选手姓名', field: 'name' },
      { headerName: '得分', field: 'score' }
    ],
    rowData: [] // 后续可以在这里赋值你的选手数据
  };
}

angular.module('app.contestants')
  .component('contestants', {
    templateUrl: 'contestants.component.html',
    controller: ContestantsController,
    controllerAs: 'vm'
  });

然后在contestants.component.html里用ag-Grid的指令：

<!-- 记得加ag-Grid的主题样式类，不然表格可能显示不正常 -->
<div ag-grid="vm.gridOptions" class="ag-theme-balham"></div>

第四步：排查其他隐藏坑 #

• 打开浏览器开发者工具的Network标签，检查所有JS/CSS文件有没有404报错，路径错了也会导致模块加载失败
• 如果用了打包工具（比如Webpack），要确保ag-Grid的模块被正确打包，或者在externals里配置好全局依赖
• 确认你的AngularJS版本是1.5.x，ag-Grid 14.0.0兼容AngularJS 1.2+，1.5.x完全没问题

如果还是报错，把错误链的最底层信息贴出来（[$injector:modulerr]是顶层错误，嵌套的错误才是真正原因），比如是不是某个服务没注入、模板加载失败之类的。

内容的提问来源于stack exchange，提问作者Paul Michael Serrano