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?

KayakDave · Accepted Answer · 2013-11-09 16:38:58Z

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) { ... }]);

deprecated AngularJS Pre-minifier –> use ng-annotate –> github.com/olov/ng-annotate

Yann Duran · Accepted Answer · 2014-07-07 07:55:58Z

1

Using the following code to avoid name-mangling during the minification process might help.

app.use(require('express-minify')({ mangle: false }));

A Github user in this pull request found that it helped them.

edited Jul 7, 2014 at 7:55

Yann Duran

3,8991 gold badge27 silver badges25 bronze badges

answered Jul 7, 2014 at 7:20

Prasad

212 bronze badges

Collectives™ on Stack Overflow

express-minify causes errors with angular

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related