angular js代码压缩后出现错误。错误：[$injector:unpr] 未知提供者：eProvider <- e <- makeErrorsDirective

Question

我使用Gulp来压缩所有的JS文件。一旦压缩完成，我遇到了以下错误：

[$injector:unpr] Unknown provider: eProvider <- e <- makeErrorsDirective.

我在控制器文件中使用了一个自定义指令。

var myhubdashboardControllers = angular.module('vpdashboardmodule', []);

.directive('mhDashboard', function ($http, authService, apiService) {
    return {
        restrict: 'EA',
        scope: {
            name: '@',
            dash: '@',
            report: '@',
            disname: '@',
            disdesc: '@',
            distot: '@'
        },
        templateUrl: 'views/dashboard/dashboard-direc.html',
        link: function (scope, element, attr) {
            scope.linkChk = scope.name;
            switch (scope.linkChk) {
                case 'Shipped This Week':
                    scope.url = 'erp/JobShipmentList/PostCpsVwShipmentCount';
                    scope.shipstatus = "Departure";
                    scope.period = "ThisWeek";
                    scope.basicfilter = "Open";
                    scope.linkName = "Shipments";
                    scope.linkDesc = "Shipped This Week";
                    break;

这是我应用中使用的代码。

}) };

- Dhamodharaan M

---

可能是使用Grunt Uglify压缩AngularJS时导致JS错误的重复问题。 - Webbies

Answer 1

你需要将服务和控制器注入到字符串数组中，这是有原因的。

如果您想要向控制器注入作用域，您必须使用

angular.module('yourApp')
    .controller('yourController',['$scope',function($scope){
    }]);

代码压缩会改变变量名，如果你在注入服务或控制器时没有使用该字符串数组，那么就会出现这种情况

Minification 会改变变量名，如果在注入服务或者控制器时没有使用这个字符串数组，那就会出现上述情况。

 angular.module('yourApp')
    .controller('yourController',function(e){
    });

因此，Angular将无法理解'e'代表什么，因此会出现错误。始终记住，顺序也很重要。

.directive('mhDashboard', ['$http','authService','apiService', function ($http, authService, apiService) {
    return {
        restrict: 'EA',
        scope: {
            name: '@',
            dash: '@',
            report: '@',
            disname: '@',
            disdesc: '@',
            distot: '@'
        },
        templateUrl: 'views/dashboard/dashboard-direc.html',
        link: function (scope, element, attr) {
            scope.linkChk = scope.name;
            switch (scope.linkChk) {
                case 'Shipped This Week':
                    scope.url = 'erp/JobShipmentList/PostCpsVwShipmentCount';
                    scope.shipstatus = "Departure";
                    scope.period = "ThisWeek";
                    scope.basicfilter = "Open";
                    scope.linkName = "Shipments";
                    scope.linkDesc = "Shipped This Week";
                    break;
}
}])

- Raghu Venmarathoor

---

我在控制器文件中有一个自定义指令。在压缩后，它会产生错误，如[$injector:unpr] Unknown provider: eProvider <- e <- e directive。除此之外，一切正常运作。 - Dhamodharaan M

谢谢Raghu。我已经完成了控制器，但是我忘记了指令。现在它可以工作了。 - Dhamodharaan M

遇到了同样的问题，我不得不在我的服务、指令以及控制器中使用["$http", function ($http) { ... }]语法。感谢您指出这一点。+1 - mhodges

Answer 2

我曾经遇到过同样的问题，即使我使用了gulp-ng-annotate，但仍仅出现在$stateProvider和ngDialog解决方案中：

$stateProvider
  .state('orders', {
    url: '/orders',
    templateUrl: 'templates/orders.html',
    controller: 'OrdersController as vm',
    resolve: {
      authenticate: function (Auth) {
        return Auth.getAuthResolve();
      }
    }
  });

Resolve 需要像这样编写：

    resolve: {
      authenticate: ['Auth', function (Auth) {
        return Auth.getAuthResolve();
      }]
    }

因此，似乎ng-annotate不会将数组注入到解析器中，而只会注入到控制器/服务/工厂构造函数中。

- Render

---

你应该在每个有注入的地方甚至是resolve内部（在每个函数之前）都使用ng-anotate。 - Morteza

Answer 3

Angular 并不总是与代码压缩兼容。

如果你写了以下代码：

angular.controller("MyCtrl", function ($scope) {...});

如果使用缩小代码（minification），那么$scope将被更改为无意义的内容。

如果使用以下代码：

angular.controller("MyCtrl", ["$scope", function (s) {...}]);

只要字符串是"$scope"，那么函数中的第一个参数（此处为s）叫什么并不重要。

请参阅文档https://docs.angularjs.org/tutorial/step_05#a-note-on-minification了解更多细节。

如果您需要更多帮助，请贴出相关代码，而不仅仅是错误信息。

- Webbies

Answer 4

我在使用angular-ui-router-title时遇到了问题。在更改后

$titleProvider.documentTitle(function($rootScope) {
    return $rootScope.$title + ' my title';
});

到

$titleProvider.documentTitle(['$rootScope', function($rootScope) {
    return $rootScope.$title + ' my title';
}]);

错误不再出现。

- iwanuschka