Angular controller not accessible in production

Question

I have a Symfony project, and as the vast majority working on more than one environments: dev and production, using Angular.js.

At the moment, I have got an Angular controller which is accessible in dev environment, but not in production, throwing the message: "Error: [ng:areq] Argument 'xxxx' is not a function, got undefined". I have seen the latter message in several threads but none of them helped me.

angular.module('MyApp').controller('MyController', function MyController($scope, MyMapper, _, moment, APP_URL, $location) {

$scope.APP_URL = APP_URL;
$scope.momentjs = moment;
$scope.isLoading = 1;
$scope.page = 1;
$scope.totalPagesNum = 1;
$scope.limit = 20;


// fill the table with data
MyMapper.find($location.search()).then(function(data) {

         // ... 
    })();
}).then(function() {
    $scope.isLoading = false;
});

});

Answer 1

If you are minimizing your code (as would be typical in production), you will want to annotate your dependencies since they may get renamed by the minimization script. In order to do this, use the following pattern for your code:

angular.module('MyApp').controller('MyController', 
    ['$scope','MyMapper','_','momemt','APP_URL','$location',
        function($scope, MyMapper, _, moment, APP_URL, $location) {
            /* your code for the controller */
        }
    ]
);

Please see https://docs.angularjs.org/guide/di for more information, particularly the "Dependency Annotation" section and the inline array notation subsection.

Answer 2

I think the issue is pretty much solved.

It turns out that the minified version of vendors.js (vendros.min.js), was not properly loaded in the production environment. Therefore, I had to point to the correct one in my Gruntfile.js.

Secondly, I refactored my controllers according to AngularJS online guide, as per Brad.

Thanks everyone involved.