javascript - Angular.module minification bug

Question

Having the darnedest time trying to figure out why minification is not working.

I have injected via an array object my providers prior the function per numerous suggestions across the web and yet still "Unknown provider: aProvider <- a"

Regular:

var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
    .config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
    $routeProvider.
        when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});

    $locationProvider.html5Mode(true);
    }])

Minified:

var app = angular.module('bpwApp', ['ui.bootstrap', 'ui', 'myTabs'])
    .config(['$routeProvider', '$locationProvider', function(a, b){
    a.
        when('/', {templateUrl: 'partials/home.jade', controller: HomeCtrl});

    b.html5Mode(true);
    }])

Any suggestion would be much obliged!

Answer 1

I ran into this problem before with Grunt.js Uglify plugin.

One of the options are mangle

uglify: {
  options: {
    mangle: false
  },

Which I believe runs regex functions on "like strings" and minifys them.

For example:

angular.module("imgur", ["imgur.global","imgur.album"]);

Would become:

angular.module("a", ["a.global","a.album"]);

Disable it --- this feature doesn't play nice with Angular.

Edit:

To be more precise as @JoshDavidMiller explains:

Uglify mangle only mangles like variables, which is what actually causes the AngularJS problem. That is, the problem is in injection and not definition.

function MyCtrl($scope, myService) would get mangled to function MyCtrl(a, b), but the service definition inside of a string should never get altered.

• Running ng-min before running uglify solves this problem.