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.

Answer 2

Problem

From AngularJS: The Bad Parts:

Angular has a built in dependency injector that will pass appropriate objects to your function based on the names of its parameters:

function MyController($scope, $window) {     // ... } 

Here, the names of the parameters $scope and $window will be matched against a list of known names, and corresponding objects get instantiated and passed to the function. Angular gets the parameter names by calling toString() on the function, and then parsing the function definition.

The problem with this, of course, is that it stops working the moment you minify your code. Since you care about user experience you will be minifying your code, thus using this DI mechanism will break your app. In fact, a common development methodology is to use unminified code in development to ease debugging, and then to minify the code when pushing to production or staging. In that case, this problem won’t rear its ugly head until you’re at the point where it hurts the most.

(...)

Since this dependency injection mechanism doesn’t actually work in the general case, Angular also provides a mechanism that does. To be sure, it provides two. You can either pass along an array like so:

module.controller('MyController', ['$scope', '$window', MyController]); 

Or you can set the $inject property on your constructor:

MyController.$inject = ['$scope', '$window']; 

Solution

You can use ng-annotate for auto adding annotations required for minifying:

ng-annotate adds and removes AngularJS dependency injection annotations. It is non-intrusive so your source code stays exactly the same otherwise. No lost comments or moved lines.

ng-annotate is faster and stabler than ngmin (which is now deprecated) and it has plugins for many tools:

• grunt-ng-annotate
• gulp-ng-annotate
• browserify-annotate

---

Starting from AngularJS 1.3 there's also a new param in ngApp called ngStrictDi:

if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.