Ui-router modal injection error on minification - angularjs

Question

I'm using ui-router and ui-bootstrap/modal
I've got a sale screen split in 2 so I have a left side with the cart and the right one can have the catalog, an edit product or a payment section.
I need to have a modal in all states so I've created a function to add in some ui-router states.
Here's the function:
var modalSaleDelete = ['$state', '$modal',
function($state, $modal) {
$modal.open({
templateUrl: 'views/sale/delete.html',
resolve: {
parentScope: function($rootScope) {
return $rootScope.parentScope;
}
},
controller: function($scope, parentScope) {
$scope.delete = function() {
// TODO: change the way this is called
parentScope.resetOrder();
parentScope = null;
$scope.$close('cancel');
};
$scope.cancel = function() {
parentScope = null;
$scope.$dismiss('cancel');
};
}
}).result.then(function() {
return $state.transitionTo($state.$current.parent);
}, function() {
return $state.transitionTo($state.$current.parent);
});
}
];
Then I put that in every state:
.state('sale.new.catalog.delete', {
url: '/delete',
onEnter: modalSaleDelete
})
It works great on development but when I minify this I get an error:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.24/$injector/unpr?p0=aProvider%20%3C-%20a
at http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:3:26944
at http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:11462
at Object.c [as get] (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:10723)
at http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:11557
at c (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:10723)
at Object.d [as invoke] (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:4:11008)
at http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:8:20044
at Object.f [as forEach] (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:3:27387)
at j (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:8:19961)
at Object.k.open (http://localhost/ociWeb/code/dist/scripts/vendor.29d508bc.js:8:20414)
I debugged that and aProvider should be '$state'.
Any idea on how to make that work?

Answer 1

You need to annotate EVERY injection for minification to work. Or, if you are using an angular-aware minifier, it probably doesn't understand which functions are injected by UI-Router and which are standard functions.
var modalSaleDelete = ['$state', '$modal',
function($state, $modal) {
$modal.open({
templateUrl: 'views/sale/delete.html',
resolve: {
parentScope: [ '$rootScope', function($rootScope) {
return $rootScope.parentScope;
}]
},
controller: [ '$scope', 'parentScope', function($scope, parentScope) {
$scope.delete = function() {
// TODO: change the way this is called
parentScope.resetOrder();
parentScope = null;
$scope.$close('cancel');
};
$scope.cancel = function() {
parentScope = null;
$scope.$dismiss('cancel');
};
}]
}).result.then(function() {
return $state.transitionTo($state.$current.parent);
}, function() {
return $state.transitionTo($state.$current.parent);
});
}
];

Answer 2

Try injecting them manually by creating an inject property. Do you have a jsfiddle or plunker set up?
modalSaleDelete.$inject = ['$state', '$modal'];

Answer 3

Well, I've figured it out. I don't see why but the problem was in resolve.
I solved it injecting '$state' in resolve though it's not needed.
When debugging I just saw the aProvider was trying to be injected in there.
var modalSaleDelete = ['$rootScope', '$state', '$modal',
function($rootScope, $state, $modal) {
$modal.open({
templateUrl: 'views/sale/delete.html',
resolve: {
parentScope: ['$state', '$rootScope', function($state, $rootScope) {
return $rootScope.parentScope;
}]
},
controller: ['$scope', '$state', 'parentScope', function($scope, $state, parentScope) {
$scope.delete = function() {
// TODO: change the way this is called
parentScope.resetOrder();
parentScope = null;
$scope.$close();
};
$scope.cancel = function() {
parentScope = null;
$scope.$dismiss();
};
}]
}).result.then(function() {
// close
return $state.transitionTo($state.current.name.replace('.delete', ''));
}, function() {
// dismiss
return $state.transitionTo($state.current.name.replace('.delete', ''));
});
}
];