CODEWITHSUNDEEP
javascriptangularjsminifyangularjs-injector
Leon Gaban
Leon Gaban

Reputation: 39044

Where is my Angularjs minify error? Error $injector

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

Upvotes: 2

Views: 5130

Answers (2)

Oren Shamun
Oren Shamun

Reputation: 150

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:

  1. Inline Annotation:

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

  2. 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!

Upvotes: 4

Grundy
Grundy

Reputation: 13380

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

Upvotes: 8

Related Questions