AngularJS automatic dependency injection broken upon update.

[dtinth]

After upgrading Harp, my AngularJS code stops working, because minification.

Possible solutions:

• Allow minification to be skipped (Give option to skip minification #406)
• Add ng-annotate to Harp's pipeline

[kennethormandy]

Hey, thanks for opening an issue. (Also thanks for the Fira system font patcher, I’m using it right now!)

Would you mind explaining this a little more? Is this expected for any reason or something that happens with certain minification approaches and Angular? Also, are you writing your code with CoffeeScript?

Thanks!

[dtinth]

Yes, I am using CoffeeScript. By the way I did not create the Fira font patcher; just the Yosemite

Angular has a dependency injection mechanism. In Angular, we can declare dependencies for our controllers and services by declaring it using argument name:

angular.module 'app', []
.controller 'MyController', ($scope, $http, myService) ->
   # $scope is automatically injected by Angular
   # $http is automatically injected by Angular
   # myService is automatically injected by Angular

Here, when a MyController instance is created, Angular would parse the function arguments' names, and inject the appropriate object. When code is minified, these parameter names become e, f, g, breaking Angular's DI mechanism.

One workaround is to use an annotated function declaration, which can safely be minified:

angular.module 'app', []
.controller 'MyController', [
'$scope', '$http', 'myService',
($scope,   $http,   myService) ->
   # $scope is automatically injected by Angular
   # $http is automatically injected by Angular
   # myService is automatically injected by Angular
]

But now we have to declare the dependencies twice. It is not pleasant, especially in CoffeeScript.

These should explain why Angular code can be broken by minifying code during the steps of mangling variable names / parameter names.

ng-annotate (linked above) is a pre-minifier which takes a JavaScript source code, and adds the appropriate annotation to the function, making the resulting code safe-to-minify.

I hope this answers your question. I really like Harp, especially when I want to do rapid prototyping. This is where Harp's convention-over-configuration shines brightly.

[sintaxi]

Yep, Angular exposes some APIs that can be problematic with magnification. @dtinth thanks for breaking it down. I think we need to give a magnification flag strong consideration almost due to this issue alone.

[redyyu]

Angularjs didn't not return Errors "nicely".

This error is because I forget remove a unused provider. (wrote in coffee)
normally we can see which provider is broken.
but, Harp server minified the "js" so the provider's name turns to 'f' (highlight in the screenshot)
I hope I can get some way to start harp server with 'pretty' js. otherwise it will be very hard to use harp to develop a angularjs project. I think some other js framework might have same issues.