Angular 1.6.4：跨模块注入外部服务报[$injector:unpr]错误求助

这个[$injector:unpr]错误说白了就是Angular的注入器找不到你要的HttpSrv服务，90%的情况都是模块依赖没配置对，或者基础定义有问题。结合你的场景，我给你梳理几个必查的点：

1. 必须让使用方模块依赖提供方模块 #

这是最容易踩的坑！你的HttpApp模块要使用hsHttp里的服务，必须在定义HttpApp的时候明确声明依赖hsHttp模块。

错误示例（没加依赖）：

// file2.js - 错误写法，HttpApp不知道hsHttp的存在
angular.module('HttpApp', []) 
  .controller('MyCtrl', function(HttpSrv) { ... });

正确示例：

// file2.js - 正确写法，声明依赖hsHttp
angular.module('HttpApp', ['hsHttp']) 
  .controller('MyCtrl', function(HttpSrv) { ... });

2. 检查服务所在模块的定义是否正确 #

确保你在file1.js里正确定义了hsHttp模块并注册了HttpSrv服务，注意不要重复创建模块（重复创建会覆盖原有模块）：

错误示例（重复创建模块）：

// file1.js - 如果之前已经定义过hsHttp，这里的[]会重置模块
angular.module('hsHttp', []) 
  .service('HttpSrv', function() { ... });

// 假设还有其他文件也定义了hsHttp，就会出问题

正确示例（如果是首次定义带[]，后续获取模块不带[]）：

// file1.js - 首次定义hsHttp模块，带依赖数组（这里是空的，因为没有其他依赖）
angular.module('hsHttp', [])
  .service('HttpSrv', function() {
    // 你的服务逻辑，比如：
    this.get = function(url) {
      // 实现HTTP请求
    };
  });

3. 确保脚本加载顺序正确 #

浏览器是按脚本标签的顺序执行代码的，所以必须先加载file1.js（hsHttp模块），再加载file2.js（HttpApp模块）。如果顺序反了，当HttpApp试图依赖hsHttp时，后者还没被定义，注入器自然找不到服务。

正确的HTML加载顺序：

<script src="angular.min.js"></script>
<script src="file1.js"></script> <!-- 先加载服务所在模块 -->
<script src="file2.js"></script> <!-- 再加载使用服务的模块 -->

4. 检查注入语法是否规范（避免压缩问题） #

如果你的代码会被压缩混淆，直接用参数名注入会出问题（压缩后参数名会被替换），这时候要用数组式注入或者$inject属性来明确声明依赖：

数组式注入示例：

// file2.js
angular.module('HttpApp', ['hsHttp'])
  .controller('MyCtrl', ['HttpSrv', function(httpSrv) {
    // 使用服务，参数名可以和服务名不同，但数组里的字符串必须匹配
    httpSrv.get('/api/data');
  }]);

$inject属性示例：

// file2.js
function MyCtrl(HttpSrv) {
  HttpSrv.get('/api/data');
}
MyCtrl.$inject = ['HttpSrv']; // 明确声明依赖
angular.module('HttpApp', ['hsHttp']).controller('MyCtrl', MyCtrl);

快速排查步骤 #

1. 先确认HttpApp模块是否声明了对hsHttp的依赖；
2. 检查hsHttp模块的定义和HttpSrv的注册是否正确；
3. 验证HTML里的脚本加载顺序；
4. 如果代码要压缩，确保注入语法符合规范。

按照这个步骤查，基本上能解决你的问题。

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