cnak2 cnak2 - 1 month ago 44
AngularJS Question

Angular UI Bootstrap $uibModal not being injected?

I'm trying to use angular-bootstrap and for some reason I'm getting an unknown provider error.

Everything looks to be in order. I've bower installed the latest version, as you can see in my bower.json file below.

Here is my bower.json file:

{
"name": "client",
"version": "0.0.0",
"dependencies": {
"angular": "^1.5.8",
"bootstrap-sass-official": "^3.2.0",
"angular-animate": "^1.4.0",
"angular-cookies": "^1.4.0",
"angular-resource": "^1.4.0",
"angular-route": "^1.4.0",
"angular-sanitize": "^1.4.0",
"angular-touch": "^1.4.0",
"angular-ui-router": "^0.3.1",
"jquery": "^2.2.0",
"angular-xeditable": "^0.2.0",
"oclazyload": "^1.0.9",
"angular-motion": "^0.4.4",
"angular-local-storage": "^0.5.0",
"angular-sweetalert": "latest",
"angular-password": "^1.0.3",
"ng-file-upload-shim": "^12.2.12",
"ng-file-upload": "^12.2.12",
"ng-img-crop": "ngImgCrop#^0.3.2",
"ngvideo": "^1.0.2",
"angular-bootstrap": "^2.2.0"
},
"devDependencies": {
"angular-mocks": "^1.4.0"
},
"appPath": "app",
"moduleName": "clientApp",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
},
"resolutions": {
"angular": "~1.x"
}
}


I've added the reference to my model:

angular
.module('clientApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ui.router',
'ngSanitize',
'ngTouch',
'ui.bootstrap',
'oitozero.ngSweetAlert'
])


And I'm injecting it into my controller:

.controller('BalanceWheelController', function($scope, $uibModal, lessons, $state) {


And my function to call the modal is:

var modalInstance = $uibModal.open({
animation: true,
backdrop: 'static',
keyboard: false,
templateUrl: 'questionsModal.html',
controller: function($scope, $uibModalInstance, SweetAlert) {

$scope.close = function() {
//self.showingExpenses = false;
$uibModalInstance.close();
videoId.play();
};
}
});


So I'm really confused as to why I'm getting the following error:

angular.js:10160 Error: [$injector:unpr] Unknown provider: $templateRequestProvider <- $templateRequest <- $uibModal
http://errors.angularjs.org/1.2.32/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24uibModal
at http://localhost:9000/bower_components/angular/angular.js:78:12
at http://localhost:9000/bower_components/angular/angular.js:3803:19
at Object.getService [as get] (http://localhost:9000/bower_components/angular/angular.js:3931:39)
at http://localhost:9000/bower_components/angular/angular.js:3808:45
at getService (http://localhost:9000/bower_components/angular/angular.js:3931:39)
at Object.invoke (http://localhost:9000/bower_components/angular/angular.js:3958:13)
at http://localhost:9000/bower_components/angular/angular.js:3809:37
at getService (http://localhost:9000/bower_components/angular/angular.js:3931:39)
at invoke (http://localhost:9000/bower_components/angular/angular.js:3958:13)
at Object.instantiate (http://localhost:9000/bower_components/angular/angular.js:3978:23) <div ui-view="" class="ng-scope">


Here are my js references in the index.html:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-xeditable/dist/js/xeditable.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="bower_components/sweetalert/dist/sweetalert.min.js"></script>
<script src="bower_components/angular-sweetalert/SweetAlert.js"></script>
<script src="bower_components/angular-password/angular-password.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<script src="bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script>
<script src="bower_components/ng-img-crop/compile/minified/ng-img-crop.js"></script>
<script src="bower_components/angular-mocks/angular-mocks.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

Answer

You've managed to install Angular 1.2.32 (note the version in the error URL) which does not have a $templateRequest provider. This has happened via one (or more) of your dependencies.

Change your resolutions to match your angular dependency version.

"resolutions": {
    "angular": "^1.5.8"
}

While you're there, I suggest you match the versions of all Angular dependencies to be exactly the same, ie angular-animate, angular-mocks, etc.