express-minify causes errors with angular

Question

HEre's my index.html:

<script src="/app/bower_components/angular/angular.js"></script>
<script src="/app/bower_components/angular-route/angular-route.js"></script> 
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>

In my express configuration, I have:

app.use(minify());
app.use('/app', express["static"](path.resolve('app')));
app.use('/public', express["static"](path.resolve('public')));

If I minify, I get an error in my AngularJS code:

 Failed to instantiate module appApp due to: [$injector:unpr] Unknown provider: e

If I don't minify, all is well. What am I doing wrong?

Answer 1

Try running ngmin (https://github.com/btford/ngmin) on your code first.

It's a "pre-minifier" that attempt to make sure all your services are injected in a min-safe way. You can read more about the issues with minification here: http://docs.angularjs.org/tutorial/step_05 (under A Note on Minification)

In short, Angular's dependency injection expects services to have a specific name (for instance $scope). But the minifiers change those names to make them shorter which throws off dependency injection (resulting in the error you're seeing- the big tip off that this is a magnification issue being that the error says it can't find a service "e". "e" is exactly the kind of shortened name that minification results in)

So, as the docs describe, you can use a style like the following, where providers are specified in strings (that are safe from minification) and then injected into the associated variable parameter on position within the array rather than by name.

  phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

You can do this by hand but ngmin is an easy way to handle all this automatically by, as ngmin's docs describe, converting:

 angular.module('whatever').controller('MyCtrl', function ($scope, $http) { ... });

into the min-safe:

 angular.module('whatever').controller('MyCtrl', ['$scope', '$http', function ($scope, $http) { ... }]);