Using Grunt Uglify to minify javascript files app.js, service.js, and controllers.js


#1

When included minified versions of app, service and controllers javascript files, the page is blank and I get this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module fieldunderwriting due to:
Error: [$injector:unpr] Unknown provider: a

I searched and found this: http://docs.angularjs.org/tutorial/step_05#controller_a-note-on-minification

I tried both options here’s the code for controllers.js from option 2

var fieldunderwritingControllers = angular.module(‘fieldunderwritingControllers’, []);

// A simple controller that fetches a list of data from a service
function PetIndexCtrl($scope, PetService) {
// “Pets” is a service returning mock data (services.js)
$scope.pets = PetService.all();
}
fieldunderwritingControllers.controller(‘PetIndexCtrl’, [’$scope’, ‘PetService’, PetIndexCtrl]);

// A simple controller that shows a tapped item’s data
function PetDetailCtrl($scope, $stateParams, PetService) {
// “Pets” is a service returning mock data (services.js)
$scope.pet = PetService.get($stateParams.petId);
}
fieldunderwritingControllers.controller(‘PetDetailCtrl’, [’$scope’, ‘$stateParams’, ‘PetService’, PetDetailCtrl]);

My app.js file has this:

var fieldunderwriting = angular.module(‘fieldunderwriting’, [‘ionic’, ‘fieldunderwritingServices’, ‘fieldunderwritingControllers’])

I’m not sure why I’m still getting the error when using minified javascript files.


#2

Make sure to run the ngmin task between concat and uglify, and set mangle to false in your uglify task options. Here’s an example:

uglify: {
  options: {
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
    mangle: false
  }
},
ngmin: {
  dist: {
    files: [
      {
        expand: true,
        cwd: '.tmp/concat/js',
        src: '*.js',
        dest: '.tmp/concat/js'
      }
    ]
  }
},

And your task order should look like this

   grunt.registerTask('build', [
    'ngmin',
    'useminPrepare',
    'concat',
    'ngmin',
    'uglify',
  ]);

#3

hi @bhstahl, can you show the whole gruntfile content


#4

Same thing. Looks like this is due to the use of the minify js.


#5

Is there a reason why you are minifying the files?

Have you tried ng-annotate before? It might help.


#6

When you define the controllers, services and everything, are you using the syntax .controller(‘name’, [’$scope’, function($scope) {});

If you don’t use the array in controller() params, when minify, it changes $scope with ‘a’ (for example) in function() param, but if it doesn’t find the same param in the array, it fails.

I think I’m not been clear, but I hope you understand me. Try to use the array syntax and let us know if it works.