AngularJS 1.5x组件注入Service出现[$injector:unpr]错误求助

我帮你排查了代码里的几个关键问题，这个[$injector:unpr]错误本质是Angular的注入器找不到MyService的提供者，下面是具体问题和修复方案：

问题1：模块引用不一致 #

你的组件和服务代码里都注释掉了var app = angular.module("teleconsultantVideo");，这导致组件和服务没有注册到同一个Angular模块上，Angular自然找不到对应的服务。必须确保两者都获取同一个模块实例。

问题2：服务方法未挂载到实例 #

你的MyService里定义了loadSecurityMatrix函数，但没有把它挂载到服务实例上，外部根本调用不到这个方法，同时也会影响Angular对服务的识别。

问题3：组件控制器的冗余注册与生命周期错误 #

• 组件已经通过controller: TeleconsultantVideoController指定了控制器，不需要再调用app.controller("TeleconsultantVideoController", TeleconsultantVideoController);，这会造成冗余甚至冲突。
• 你把MyService的调用放在了控制器的顶层代码里，而不是组件生命周期的$onInit方法中，此时组件的绑定属性（比如accessToken）可能还未就绪，同时你错误地使用了$scope.accessToken（绑定属性会挂载到控制器实例上，而非$scope）。
• 你写错了生命周期方法的引用：$ctrl.$onInit应该是ctrl.$onInit（因为你定义了var ctrl = this）。

修复后的完整代码 #

服务代码（MyService）

(function () {
  // 必须获取同一个模块实例，不要注释掉这行
  var app = angular.module("teleconsultantVideo");

  function MyService($http, $q) {
    // 将方法挂载到服务实例上，确保外部可以调用
    this.loadSecurityMatrix = loadSecurityMatrix;

    function loadSecurityMatrix(token) {
      alert("into the function");
      var authToken = token;
      var config = {
        'headers': {
          'Authorization': "Bearer " + authToken
        }
      };
      return $http.get('http://localhost:3000/securityMatrix', config)
        .then(function (result) {
          return result;
        }, function (err) {
          return err;
        });
    }
  }

  app.service('MyService', MyService);
  MyService.$inject = ['$http', '$q'];
})();

组件与控制器代码

(function () {
  // 获取同一个模块实例
  var app = angular.module("teleconsultantVideo");

  app.component('teleVideo', {
    bindings: {
      accessToken: '@'
    },
    templateUrl: './teleconsultant-video/teleconsultant-video.component.html',
    controller: TeleconsultantVideoController,
    controllerAs: 'ctrl',
  });

  function TeleconsultantVideoController($scope, MyService) {
    var ctrl = this;

    // 正确使用组件生命周期方法，确保绑定属性就绪后再执行逻辑
    ctrl.$onInit = function () {
      alert("Hi");
      // 使用控制器实例上的accessToken（来自组件绑定）
      MyService.loadSecurityMatrix(ctrl.accessToken)
        .then(function(result) {
          console.log('安全矩阵加载成功:', result);
          // 这里可以添加成功后的业务逻辑
        })
        .catch(function(err) {
          console.error('安全矩阵加载失败:', err);
          // 这里可以添加错误处理逻辑
        });
      // 如果用controllerAs模式，建议把属性挂载到控制器实例上，而非$scope
      ctrl.onCallDisconnect = true;
    };
  }

  // 正确注入依赖，无需额外注册控制器
  TeleconsultantVideoController.$inject = ['$scope', 'MyService'];
})();

额外注意事项 #

• 确保你的Angular模块teleconsultantVideo已经在应用启动时正确定义（比如在入口文件里有angular.module("teleconsultantVideo", []);）。
• 组件绑定的accessToken属性要确保父组件或模板传递了正确的值，否则服务调用会传空值。

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