angular-ui-bootstrap causes unknown provider error when minified

Question

After adding angular-ui-bootstrap and running grunt serve on my yeoman app, it runs perfectly and the modal I want to show is displayed correctly, but once I do a grunt build, I get an unknown provider error in my console.

<!-- This is what I added in my index.html -->
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

// In app.js I have 
angular.module('yeomanApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'ngRoute',
  'ui.bootstrap'
])

and in the controller,

.controller('myCntrl', function ($modal) {

$scope.items = ['item1', 'item2', 'item3'];

$scope.showDeleteWarning = function () {
    var modalInstance = $modal.open({
        templateUrl: 'deleteWarning.html',
        controller: ModalInstanceCtrl,
        resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {});
  };

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
    deleteVent();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

};

Answer 1

Likely that you need to inject your controller dependency...

https://docs.angularjs.org/tutorial/step_05#a-note-on-minfication

.controller('myCntrl', ['$modal', function ($modal) {
    /* Controller Code Here... */
}]);

Answer 2

I know this is an old question, but I'll post my answer here for people who come across this problem in the future.

I came across this exact problem before. The cause of your errors during minification is most likely your 'var ModalInstanceCtrl'.

Here's how I got my code to work:

var modalInstance = $modal.open({
    templateUrl: 'deleteWarning.html',
    controller: 'ModalInstanceCtrl', //change this to a string
    resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

and this line:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) {

to:

angular.module('myModule').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

Answer 3

For anyone who just encountered this problem, maybe this will help. We use customModalDefaults and customModalOptions, so we had to turn the whole return $modal.open(tempModalDefaults).result; in the show function to the following:

this.show = function (customModalDefaults, customModalOptions) {
    //Create temp objects to work with since we're in a singleton service
    var tempModalDefaults = {};
    var tempModalOptions = {};

    //Map angular-ui modal custom defaults to modal defaults defined in service
    angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

    //Map modal.html $scope custom properties to defaults defined in service
    angular.extend(tempModalOptions, modalOptions, customModalOptions);

    return $modal.open({
        backdrop: customModalDefaults.backdrop,
        keyboard: customModalDefaults.keyboard,
        modalFade: customModalDefaults.modalFade,
        templateUrl: customModalDefaults.templateUrl,
        size: customModalDefaults.size,
        controller: ['$scope', '$modalInstance', function ($scope, $modalInstance) {
            $scope.modalOptions = tempModalOptions;
            $scope.modalOptions.ok = function (result) {
                $modalInstance.close(result);
            };
            $scope.modalOptions.close = function (result) {
                $modalInstance.dismiss('cancel');
            };
        } ]
    }).result;
};