Error after Minification of angular js. Error: [$injector:unpr] Unknown provider: 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;

}) };

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

Answer 1

Angular 并不总是适用于缩小。

如果你举个例子这样写：

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

然后 $scope 将在缩小期间更改为无意义的内容。

如果改为：

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

那么调用函数中的第一个参数是什么并不重要（这里是s），只要字符串是"$scope"即可。

有关详细信息，请参阅文档中的 https://docs.angularjs.org/tutorial/step_05#a-note-on-minification。

如果您需要更多帮助，您必须 post 有问题的代码，而不仅仅是错误。

Answer 2

您必须在字符串数组中注入服务和控制器是有原因的。

如果你想将范围注入控制器，你必须使用

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

缩小会更改变量名称，如果您在注入服务或控制器时不使用该字符串数组，它将类似于

 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;
}
}])

Answer 3

我有同样的问题，即使我使用 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并没有将数组注入到resolves中，而是只注入到controller/service/factory构造函数中。

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';
}]);

错误不再出现。

Error after Minification of angular js. Error: [$injector:unpr] Unknown provider: eProvider <- e <- makeErrorsDirective

Error after Minification of angular js. Error: [$injector:unpr] Unknown provider: eProvider <- e <- makeErrorsDirective

javascript

angularjs

minify

bundling-and-minification

gulp-minify