I'm trying to use Angular UI modal, but I keep getting an unknown provider error message: "[Error: [$injector:unpr]](http://errors.angularjs.org/1.2.32/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24uibModal)".

I use custom build to minimize the overall size of the file. I have injected the ui dependency in the app when creating it. The build files are added to the index.html page.

```js
//This is the app.js file
(function() {
  angular.module('locatorApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);

  function config($routeProvider, $locationProvider) {

    $routeProvider
      .when('/', {
        templateUrl: 'home/home.view.html',
        controller: 'homeCtrl',
        controllerAs: 'vm'
      })
      .when('/about', {
        templateUrl: '/common/views/genericText.view.html',
        controller: 'aboutCtrl',
        controllerAs: 'vm'
      })
      .when('/location/:locationid', {
        templateUrl: '/locationDetail/locationDetail.view.html',
        controller: 'locationDetailCtrl',
        controllerAs: 'vm'
      })
      .otherwise({
        redirectTo: '/'
      });

    $locationProvider.html5Mode(true);
  }

  angular
    .module('locatorApp')
    .config(['$routeProvider', '$locationProvider', config]);

})();
```

```js
//This is the controller file

(function() {
  angular
    .module('locatorApp')
    .controller('locationDetailCtrl', locationDetailCtrl);

  /*Inject $routeParams service into controller to protect from minification*/
  locationDetailCtrl.$inject = ['$routeParams', '$uibModal', 'locatorData'];

  function locationDetailCtrl($routeParams, $uibModal, locatorData) {
    var vm = this;
    vm.locationid = $routeParams.locationid;
    locatorData.locationById(vm.locationid)
      .success(function(data) {
        vm.data = {
          location: data
        };
        vm.pageHeader = {
          title: vm.data.location.name
        };
      })
      .error(function(e) {
        console.log(e);
      });

    vm.popupReviewForm = function() {
      alert("Let's add a review");
    };

  }

})();
```

```html
<!-- This is the index.html file-->
<!DOCTYPE html>
<html ng-app="locatorApp">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>LocatoR</title>
  <link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
  <link rel="stylesheet" href="/stylesheets/style.css">
</head>

<body ng-view>
  <script src="/angular/angular.min.js"></script>
  <script src="/lib/angular-route.min.js"></script>
  <script src="/lib/angular-sanitize.min.js"></script>
  <script src="/lib/ui-bootstrap-custom-2.5.0.min.js"></script>
  <script src="/lib/ui-bootstrap-custom-tpls-2.5.0.min.js"></script>
  <script src="/angular/locator.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/
jquery.min.js"></script>
  <script src="/bootstrap/js/bootstrap.min.js"></script>
  <script src="/javascripts/validation.js"></script>
</body>

</html>
```

```js
//This is the locatorData service
(function() {
  /*Data service for pulling data from the API*/
  locatorData.$inject = ['$http'];

  function locatorData($http) {
    var locationByCoords = function(lat, lng) {
      return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxdist=20');
    };

    var locationById = function(locationid) {
      return $http.get('/api/locations/' + locationid);
    };
    return {
      locationByCoords: locationByCoords,
      locationById: locationById
    };
  };

  angular
    .module('locatorApp')
    .service('locatorData', locatorData);

})();
```