AngularJS+Karma+Jasmine项目[$injector:modulerr]报错求助

嘿，我在维护AngularJS老项目的时候，也踩过Karma+Jasmine测试时[$injector:modulerr]的坑，结合你用的版本，咱们一步步拆解排查：

先搞懂报错本质 #

[$injector:modulerr]本质是Angular的注入器无法初始化指定模块，背后的原因通常是这几类：模块名拼写错误、依赖的文件没加载、模块本身有语法错误、或者依赖的子模块加载失败。

从核心配置开始排查 #

1. 检查Karma配置的文件加载顺序 #

Karma的files数组顺序绝对不能乱，必须遵循「基础库→依赖库→项目代码→测试代码」的顺序，尤其是angular.js和angular-mocks.js的位置：

// karma.conf.js 正确示例
module.exports = function(config) {
  config.set({
    files: [
      // 先加载Angular核心库
      'node_modules/angular/angular.js',
      // 再加载angular-mocks（必须在项目代码之前）
      'node_modules/angular-mocks/angular-mocks.js',
      // 项目代码：先加载主模块定义（app.js），再加载控制器、工厂等子模块
      'src/app.js',
      'src/controllers/**/*.js',
      'src/factories/**/*.js',
      // 最后加载测试文件
      'test/**/*.spec.js'
    ],
    // 其他配置...
  });
};

重点提醒：AngularJS 1.6.x要求angular-mocks的版本必须和Angular核心版本完全一致，别装错版本！

2. 验证测试文件的模块注入正确性 #

在你的app.spec.js里，一定要用module()（或angular.mock.module()）加载正确的主模块名，大小写、拼写必须和app.js里的定义完全一致：
比如app.js里的模块定义：

// app.js
angular.module('myLargeAngularApp', ['ui.router', 'ngResource']);

那测试文件里必须对应：

// app.spec.js
describe('My Large App Tests', function() {
  // 加载主模块，名字必须完全匹配
  beforeEach(module('myLargeAngularApp'));

  // 先写一个最小化测试验证模块是否能正常注入
  it('should initialize the module without errors', inject(function($rootScope) {
    expect($rootScope).toBeDefined();
  }));
});

如果你的项目开启了严格依赖注入模式（ngStrictDi），那所有控制器、工厂都必须用显式注入（数组语法或$inject属性），否则模块初始化会直接失败。

3. 排查项目模块本身的初始化错误 #

有时候[$injector:modulerr]是因为主模块依赖的子模块出了问题，比如某个控制器有语法错误、某个工厂依赖的服务未定义。你可以用「最小化测试法」定位：

• 先注释掉所有测试逻辑，只保留加载主模块的代码，看是否还报错。
• 如果仍报错：检查app.js里的依赖是否都在Karma的files里引入了（比如第三方模块ui.router的文件有没有加进去）。
• 如果不报错：再逐步添加控制器、工厂的测试代码，加到哪个环节报错，就定位到对应的文件排查。

4. 注意AngularJS 1.6.x的特殊细节 #

AngularJS 1.6.x和旧版本有一些差异，可能间接导致模块加载失败：

• angular-mocks的module()方法对不存在的模块会直接抛出[$injector:modulerr]，所以模块名拼写错误的影响更直接。
• 如果你的模块在启动时就会调用服务发请求（比如路由resolve里的逻辑），要确保测试前用$httpBackend mock掉这些请求，否则可能导致模块初始化卡住。

5. 查看完整错误栈找根源 #

[$injector:modulerr]的表层报错信息很笼统，你需要打开Karma启动的浏览器，在开发者工具的控制台里查看完整的错误栈，里面会包含更具体的子错误（比如[$injector:unpr]表示未知提供商、[$injector:nomod]表示模块不存在），这才是解决问题的关键。

快速排查 checklist #

• Karma的files数组顺序是否正确？
• angular-mocks版本是否和Angular核心版本一致？
• 测试文件里的模块名和app.js里的是否完全匹配？
• 项目代码是否有语法错误？
• 是否开启了严格注入模式，且所有组件都用了显式注入？
• 有没有查看浏览器控制台的完整错误栈？

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