未知的提供者：Yeoman AngulajrJS 生成的应用程序中的 aProvider 错误

Question

我使用 Yeoman AngularJS 生成器生成了一个 AngularJS 应用程序，它在使用原始源代码运行时运行良好。

但是当我尝试从 Grunt build 生成的 dist 文件夹中运行应用程序时 我收到以下错误：

vendor.972e9c35.js:5 错误：[$injector:unpr] 未知提供者：aProvider https://errors.angularjs.org/1.7.2/$injector/unpr?p0=aProvider%20%3C-%20a 在 vendor.972e9c35.js:3 在 vendor.972e9c35.js:4 在 Object.d [as get] (vendor.972e9c35.js:4) 在 vendor.972e9c35.js:4 在 d (vendor.972e9c35.js:4) 在 e (vendor.972e9c35.js:4) 在 Object.g [作为调用] (vendor.972e9c35.js:4) 在 l.instance (vendor.972e9c35.js:5) 在 vendor.972e9c35.js:26 在 i (vendor.972e9c35.js:6) "可能未处理的拒绝：{}"

我看到这是一个常见错误，解决方案应该是在一个数组中声明所有服务（您可以使用 ng-annotated npm 模块自动执行此操作） - 我这样做了，但我仍然遇到同样的错误。

这是我的原始 .js 文件，其中包含所有控制器和服务：

var routerApp = angular.module('routerApp', ['ui.router','ui.grid','ui.bootstrap']);


routerApp.controller('expensesListCtrl',["$http", "gridService", function ($http,gridService) {
    var vm = this;
    vm.recievedData = false;
    vm.searchInput;
    vm.gridOptions = gridService.getOption();
    //vm.gridOptions.columnDefs = [{field:"name"},{field:"amount"},{field:"type"},{field:"time",type:'date'}];

    $http.get("http://localhost:8080/expenses").then(function(response){

      gridService.setData(response.data.expenses);
      gridService.setUnfilteredData(response.data.expenses);
      vm.recievedData = true;
    }).catch(function (error) {
        console.log(error);
    });
}]);

routerApp.factory('gridService',function () {


  var gridServiceInstance = {};
  gridServiceInstance.gridOptions = {};
  gridServiceInstance.gridOptions.columnDefs = [{field:"name"},{field:"amount"},{field:"type"},{field:"time",type:'date'}];
  gridServiceInstance.unfilteredData;

  gridServiceInstance.getData = function () {
    return gridServiceInstance.gridOptions.data;
  }

  gridServiceInstance.setData = function (data) {
    gridServiceInstance.gridOptions.data = data;
  }

  gridServiceInstance.getOption = function(){
    return gridServiceInstance.gridOptions;
  }

  gridServiceInstance.setUnfilteredData = function (data) {
    gridServiceInstance.unfilteredData = data;
  }

  gridServiceInstance.getUnfilteredData = function(){
    return gridServiceInstance.unfilteredData;
  }

  return gridServiceInstance;

})

routerApp.controller('mainPageNavCtrl',["$scope", "$uibModal", "$http", "gridService", function ($scope,$uibModal,$http,gridService) {

    var vm = this;
    $scope.check = "check str";


    $scope.addPath = function(){
        console.log("add path");
        $uibModal.open({
            templateUrl: 'addPathModal.html',
            controller: ["$scope", "$uibModalInstance", function ($scope, $uibModalInstance) {

                $scope.addExpenseForm = {};

                $scope.ok = function () {
                    $http.post("http://localhost:8080/expenses",$scope.addExpenseForm).then(function(response){
                        console.log(response);
                    })
                    $uibModalInstance.close();
                };

                $scope.cancel = function () {
                    $uibModalInstance.dismiss('cancel');
                };
            }]
        })
    }
    $scope.searchText = function () {
      console.log("inside search text");

      if($scope.searchInputText == null || $scope.searchInputText.length == 0)
      {
        gridService.setData(gridService.getUnfilteredData());
        return;
      }

      var filteredData = gridService.getUnfilteredData().filter(function (element) {
        if ( (element.name.indexOf($scope.searchInputText) != -1) || element.type.indexOf($scope.searchInputText) != -1) {
          return true;
        }
        return false;
      });
      gridService.setData(filteredData);
    }

}])


routerApp.config(["$stateProvider", "$urlRouterProvider", function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');
    $stateProvider

    // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'expensesList.html',
            controller: 'expensesListCtrl as vm'
        })

        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
            // we'll get to this in a bit
        });

}]);

我错过了什么？ 感谢您的帮助！

Answer 1

Angular 从控制器构造函数的参数名称中推断出控制器的依赖关系，如果你要缩小费用列表Ctrl 控制器的 JavaScript 代码，它的所有函数参数也会被缩小，并且依赖注入器将无法正确识别服务。相同的逻辑适用于定义services 和factories。

您可以通过使用依赖项名称注释函数来解决此问题，以字符串形式提供，不会被缩小。

Angular 通过注入器调用某些功能（如服务工厂和控制器）。您需要对这些函数进行注释，以便注入器知道要将哪些服务注入到函数中。使用服务名称信息注释代码的方法有以下三种：

• 使用内联数组注释（首选）
• 使用$inject 属性注释
• 从函数参数名称中隐含（有警告） 因此，您已经使用了第一种方法，您还需要将它用于工厂（即使不需要显式依赖项）。

所以，以下应该可以解决问题：

routerApp.factory('gridService', [ function () { /*factory code*/ }]);

Angularjs dependency annotation

declaring-angularjs-modules-for-minification