Angular injector error with minified JavaScript - angularjs

Question

I have been struggling to find a solution for this problem:
I am using Angular.js on my site.
I use CoffeeScript to write my JavaScript in Visual Studios 2012. When I save my CoffeeScript - both a minified and un-minified version of the JavaScript file is saved.
While using any minified version of JavaScript files on my webpage I keep getting this error:
Error: $injector:unpr
Unknown Provider
Unknown provider: nProvider <- n
This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. For example:
If I don’t use the minified version everything works fine.
Here is how I use angular to declare my App in each JavaScript file
(function() {
var myApp;
myApp = angular.module("myApp", ['uploaddirective']);
myApp.controller("videoController", function($scope, $http, $compile) {
Can anyone help me to resolve this issue?

Answer 1

Use array notation for minification-safe dependency injection:
myApp.controller("videoController", ['$scope', '$http', '$compile', function($scope, $http, $compile) {
Another option is to use build task to automatically annotate injections for you:
// #ngInject
myApp.controller("videoController", function($scope, $http, $compile) {
You will need grunt or gulp plugin for this, like ngAnnotate.
https://docs.angularjs.org/guide/di

Answer 2

When you minifying the above code you will get something like
a.controller("videoController", function(x, y, z) {...
note that $scope, $http, $compile are replaced with x, y, z.
So when angular starts to execute Controller can't find the injectors because $scope, $http, $compile are replaced with x, y, z and there are no inject-able providers as x, y or z, so angular will trigger a error saying Unknown Provider.
solution 1
you can follow Inline Array Annotation as,
myApp.controller("videoController", ['$scope', '$http', '$compile', function($scope, $http, $compile) {...
after minifying this you will get something like
a.controller("videoController", ['$scope', '$http', '$compile', function(x, y, z) {...
minifying process doesn't effect on strings, here angular will use a array with strings that will match the providers. Here angular will match the x with $scope and so on.
solution 2
$inject Property Annotation
var MyController = function($scope, $http, $compile) {
// controller function ...
}
MyController.$inject = ['$scope', '$http', '$compile'];
myApp.controller("videoController", MyController);
additionally check ng-annotate