Where is my Angularjs minify error? Error $injector

Question

I'm running into that annoying Angular minify problem (I really hope this issue is non-existent in Angular 2)

I've commented out all my app module injections and going down the list 1 by 1 to find out where the problem is and I think I narrowed it down to my searchPopoverDirectives:

Can you see what I'm doing wrong?

Original code, produces this error Unknown provider: eProvider <- e:

(function() { "use strict";

    var app = angular.module('searchPopoverDirectives', [])

    .directive('searchPopover', function() {
        return {
            templateUrl : "popovers/searchPopover/searchPopover.html",
            restrict    : "E",
            scope       : false,
            controller  : function($scope) {

                // Init SearchPopover scope:
                // -------------------------
                var vs = $scope;
                vs.searchPopoverDisplay = false;

            }
        }
    })

})();

I then tried the [] syntax in an attempt to fix the minify problem and ran into this error Unknown provider: $scopeProvider <- $scope <- searchPopoverDirective:

(function() { "use strict";

    var app = angular.module('searchPopoverDirectives', [])

    .directive('searchPopover', ['$scope', function($scope) {
        return {
            templateUrl : "popovers/searchPopover/searchPopover.html",
            restrict    : "E",
            scope       : false,
            controller  : function($scope) {

                // Init SearchPopover scope:
                // -------------------------
                var vs = $scope;
                vs.searchPopoverDisplay = false;

            }
        }
    }])

})();

UPDATE: Also found out this guy is causing a problem:

.directive('focusMe', function($timeout, $parse) {
    return {
        link: function(scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function(value) {
                if (value === true) { 
                    $timeout(function() {
                        element[0].focus(); 
                    });
                }
            });
            element.bind('blur', function() {
                scope.$apply(model.assign(scope, false));
            })
        }
    }
})

you tried [] syntax in wrong place :-) move it from directive ( where you not dependency), to controller function — Grundy
– Grundy, Commented May 8, 2015 at 15:25
on update: here you solution with directives should work :-) — Grundy
– Grundy, Commented May 8, 2015 at 15:47
I use ng-annotate (github.com/olov/ng-annotate) before minifying. It does that automatically. — pgrodrigues
– pgrodrigues, Commented May 8, 2015 at 16:32

Grundy · Accepted Answer · 2015-05-08 15:28:35Z

8

When you minify code, it minify all code, so your

controller  : function($scope) {

was minified to something like

controller  : function(e) {

so, just use

controller  : ["$scope", function($scope) { ... }]

answered May 8, 2015 at 15:28

Grundy

13.4k3 gold badges39 silver badges57 bronze badges

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

2 Comments

Leon Gaban Over a year ago

Ah thanks! Yeah.. this bug really drives me nuts! I need to remember to keep minify on as often as possible... just makes debugging hard :(

Grundy Over a year ago

@LeonGaban you just need remember A note on minification: Use an inline annotation where, instead of just providing the function, you provide an array.

Jim Buck · Accepted Answer · 2015-07-27 17:48:34Z

When minifying javascript the parameter names are changed but strings remain the same. You have 2 ways that you can define which services need to be injected:

Inline Annotation:

phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http){
    ...
}]);

Using the $inject property:

phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

PhoneListCtrl.$inject = ['$scope', '$http'];

function PhoneListCtrl($scope, $http){
    ...
}

Using $inject is considered more readable than inline annotations. It is best practice to always have one line declaring the controller, service, or directive, one line for defining the injection values, and finally the implementation method. The method may be defined last due to the hoisting nature of javascript.

Remember: The order of your annotation (strings) and your function parameters must be the same!

Collectives™ on Stack Overflow

Where is my Angularjs minify error? Error $injector

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related