执行代码时Chrome控制台报AngularJS [$injector:modulerr]错误求助

这个错误我在项目里踩过好多次了——AngularJS抛出的[$injector:modulerr]本质就是在告诉你：你的应用模块初始化失败了，背后大多是几个非常常见的小问题，咱们一步步排查修复：

1. 先搞清楚具体错误细节 #

首先建议你把页面里的angular.min.js换成未压缩的angular.js版本，这样控制台会输出更具体的错误信息（比如是某个依赖模块找不到，还是组件注入语法错了），压缩版的错误提示太模糊，不利于定位问题。

2. 排查最常见的几个原因 #

模块依赖拼写错误或缺失 #

• 检查你的主模块定义，比如angular.module('app', ['ngRoute', 'ngResource'])里的依赖名称，AngularJS的内置模块都是大小写敏感的！比如把ngRoute写成ngroute直接就会报错。
• 确认所有依赖的脚本都已经在页面中加载：比如用了ngResource，就得引入对应的angular-resource.js文件，别漏了这一步。

模块定义/引用的语法错误 #

• 别搞混模块创建和引用的语法：
  • 创建模块（带第二个空数组参数）：angular.module('app', [])
  • 引用已创建的模块（不带第二个参数）：angular.module('app')
    如果在多个文件里重复用angular.module('app', [])，后面的会直接覆盖前面的模块定义，导致之前配置的路由、服务全部失效。
• 检查控制器、服务的注入语法：比如有没有漏写依赖，或者用了简化注入写法（比如function MyCtrl($scope) {}）但没做ng-annotate处理——压缩代码时这种写法会把$scope这类依赖变量名替换成短变量，直接导致注入失败。

脚本加载顺序错误 #

AngularJS对脚本加载顺序要求很严格，必须按这个顺序来：

1. 先加载核心的angular.js
2. 再加载所有依赖模块的脚本（比如angular-route.js、angular-resource.js）
3. 最后加载你自己的应用脚本（比如app.js、controllers.js）

举个正确的加载示例：

<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>

全局变量冲突或重复定义模块 #

• 检查页面里有没有其他脚本占用了angular这个全局变量，比如某些老的JS库可能会和AngularJS冲突。
• 确保你的应用模块只在一个地方创建（比如app.js里写angular.module('app', [])），其他文件里只做引用。

3. 快速验证方法 #

如果还是找不到问题，可以先写一个极简的测试代码，确认基础环境没问题：

// app.js
angular.module('app', [])
  .controller('TestCtrl', function($scope) {
    $scope.message = 'Hello Angular!';
  });

<!-- 页面 -->
<div ng-app="app" ng-controller="TestCtrl">
  {{ message }}
</div>
<script src="angular.js"></script>
<script src="app.js"></script>

如果这个极简代码能正常运行，说明你的基础环境没问题，再逐步加回之前的依赖和代码，就能定位到具体是哪部分出了问题。

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