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

Question

I used Gulp to minify my entire js files. Once minified I got an error like the following:

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

I had a Custom directive in my controller file.

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;

}) };

This is the code used in my application.

Possible duplicate of Angularjs minification using grunt uglify resulting in js error — Webbies
– Webbies, Commented Feb 1, 2016 at 9:35

Raghu Venmarathoor · Accepted Answer · 2016-02-01 10:08:01Z

24

There is a reason why you have to inject services and controller in string array.

if you want to inject scope to controller, you have to use

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

Minification will change the variable names and if you don't use that array of strings while injecting services or controllers, it will be like

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

So, angular will not be able to understand what 'e' stands for, hence the error. Always remember that the order is also important.

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

edited Feb 1, 2016 at 10:08

answered Feb 1, 2016 at 9:37

Raghu Venmarathoor

8681 gold badge11 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dhamodharaan M Over a year ago

i had a custom directive in my controller file.after minification it produces the error like [$injector:unpr] Unknown provider: eProvider <- e <- e directive..Other than that everything working fine.

Dhamodharaan M Over a year ago

thanks Raghu. I done for controller but i missed for directives. It works now.

mhodges Over a year ago

Had the same issue, I had to use the ["$http", function ($http) { ... }] syntax on my services & directives as well as my controllers. Thank you for pointing this out. +1'd

Webbies · Accepted Answer · 2016-02-01 09:34:06Z

3

Angular doesn't always work well with minification.

If you as an example write this:

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

Then the $scope would be changed to something meaningless during minification.

If one instead changes that to:

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

Then it doesn't matter what the first argument in the function is called (here s), as long as the string is "$scope".

See this: https://docs.angularjs.org/tutorial/step_05#a-note-on-minification in the documentation for more details.

If you want more help, you have to post the code in question, not just the error.

answered Feb 1, 2016 at 9:34

Webbies

9879 silver badges17 bronze badges

Comments

Render · Accepted Answer · 2017-01-23 13:28:58Z

3

I had this same issue, even when I use gulp-ng-annotate, but it only happens occurs for $stateProvider and ngDialog resolves:

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

Resolve needs to be written like this:

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

So it feels that ng-annotate does not inject the array into resolves, but only to controller/service/factory constructors.

answered Jan 23, 2017 at 13:28

Render

2,3492 gold badges19 silver badges15 bronze badges

1 Comment

Morteza Ziyaeimehr Over a year ago

You should use ng-anotate everywhere that has an injection even inside resolve (before every function)

iwanuschka · Accepted Answer · 2018-02-03 14:18:55Z

1

I had an issue using angular-ui-router-title. After changing

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

to

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

the error doesn't appear anymore.

answered Feb 3, 2018 at 14:18

iwanuschka

4751 gold badge6 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related