Angularjs injector error after grunt uglify

Question

I'm working on uglifying my angularjs project. I'm having issue after uglification process. The following function doesn't work.

app.factory('Showmenusheet', function($rootScope){
return {

    //Custom pop up sheet for activities completed notification
    openNativePopup: function(imageUrl, title, para, buttonText, buttonLink){   

        $('#popupTitle').html(title);
        $('#popupPara').html(para);
        $('#popupButton').html(buttonText);

        var imageElement = angular.element(document.querySelector('#popupImage'));
        var goToButton = angular.element(document.querySelector('#goToButton'));
        var closeButton = angular.element(document.querySelector('#closeButton'));

        goToButton.removeAttr("ng-show");
        closeButton.removeAttr("ng-show");  
        goToButton.removeAttr("go-click");      

        if(buttonLink == false) {
            goToButton.attr("ng-show", false);
            closeButton.attr("ng-show", true);
            $('#closeButton').html(buttonText);
        } else {
            goToButton.attr("ng-show", true);
            goToButton.attr("go-click", buttonLink);
            closeButton.attr("ng-show", false);
            $('#goToButton').html(buttonText);
        }


        imageElement.attr("src", 'assets/images/app_icons/'+imageUrl);
        compile(goToButton);
        compile(closeButton);
        compile(imageElement);

        setTimeout(function(){$('#nativePopup').addClass("showNativePopup");},350);
        setTimeout(function(){$('#deletemenu').addClass('delete-menu-active');},0);

    }
}
});

This is the error I get in console.

So basically if I don't uglify the code, the popup function works well without any problem however after uglify, I get the error in screenshot above. Am I doing anything wrong in the above function which is against the standards?

---

EDIT After adding various console log testings, I found the control is showing error with compile() function. I want the compile function to update the HTML everytime the 'openNativePopup' function is called from AngularJS. What alternate can be used instead of compile()?

Answer 1

Usually minification errors on AngularJS errors are comes from missing full annotation that the dependency injection uses.

Think of it like that, lets say we have a service

angular
.module('MyModule', [])
.service('myService', function($rootScope) {
  $rootScope.title = 'my title'; 
});

Angular injects $rootScope into your function.

Whenever this code goes through minification, it become something like

angular
.module('MyModule', [])
.service('myService', function(a) {
  a.title = 'my title';
});

This make AngularJS dependency injection mechanism to throw, cause there is no such a that is registered to angular.

In order to solve this issue, there is $inject Property Annotation.

So the code should looks like that in order to support minification.

angular
.module('MyModule', [])
.service('myService', ['$rootScope', function($rootScope) {
  $rootScope.title = 'my title';
}]);

There is a tool that does this annotation automatically