Search code examples
javascriptangularjsherokugruntjsgrunt-contrib-uglify

Angular controller module fails to instantiate after Grunt uglify


I have been trouble-shooting my heroku build and have been unable to pin down the reason as to why this angular module is not instantiating. When I run my app on localhost everything runs fine, so I assume that the error takes place during Grunt’s uglification process. All of my similar controller modules seem to load fine and I can see them in the “Sources” tab in dev tools. However this controller file does not show up, I assume because there is some error inside of it.

Here is the module (controller) that doesn’t instantiate:

angular.module('inspector.location', [])
.controller('LocationDisplayController', function($scope, $http, $routeParams,
 ResultService) {
  var controller = this;
  this.inspections = ResultService.inspections;
});

What it looks like uglified (I set mangle to false in an attempt to fix this issue): angular.module("inspector.location", []).controller("LocationDisplayController",function($scope,$http,$routeParams,Resu ltService){this.inspections=ResultService.inspections})

This is it’s only non-built-in dependency:

.service('ResultService', function(){
  this.value = '';
  this.inspections = '';
})

Here is app.js:

angular.module('inspector', [
  'inspector.search',
  'inspector.results',
  'inspector.location',
  'inspector.services',
  'ngRoute'
])

and here is the full error:

angular.js:4630 Uncaught Error: [$injector:modulerr] Failed to instantiate
module inspector due to:
Error: [$injector:modulerr] Failed to instantiate module inspector.location
due to:
Error: [$injector:nomod] Module 'inspector.location' is not available! You
either
misspelled the module name or forgot to load it. If registering a module 
ensure 
that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.5.6/$injector/nomod?p0=inspector.location
at https://ancient-sea-93514.herokuapp.com/scripts/angular/angular.js:68:12
. . . .

**Edit for changes made.
New version of LocationDisplayController:

angular.module('inspector.location', [])
.controller('LocationDisplayController', ['ResultService',
function(ResultService) {
  var controller = this;
  controller.inspections = ResultService.inspections;
}]);

LocationDisplayController.$inject = ['ResultService']

Solution

  • You need to specify the dependencies using the array syntax like:

    angular.module('inspector.location', [])
      .controller('LocationDisplayController', ['$scope', '$http', '$routeParams',
      'ResultService',
        function($scope, $http, $routeParams, ResultService) {
          var controller = this;
          this.inspections = ResultService.inspections;
        }
      ]);
    

    or explicitly using the injector so that angular knows what to inject after minification.