Search code examples
javascriptangularjsangular-ui-bootstrapangular-bootstrapangularjs-injector

Angular bootstrap injector error

I'm getting an injector error when I try to use angular bootstrap. Here is the error:

angular.js:13424 Error: [$injector:unpr] http://errors.angularjs.org/1.5.3/$injector/unpr?p0=ui.bootstrapProvider%20%3C-%20ui.bootstrap%20%3C-%20AdminController
at Error (native)
at http://localhost:3000/node_modules/angular/angular.min.js:6:416
at http://localhost:3000/node_modules/angular/angular.min.js:43:7
at Object.d [as get] (http://localhost:3000/node_modules/angular/angular.min.js:40:270)
at http://localhost:3000/node_modules/angular/angular.min.js:43:69
at d (http://localhost:3000/node_modules/angular/angular.min.js:40:270)
at e (http://localhost:3000/node_modules/angular/angular.min.js:41:1)
at Object.instantiate (http://localhost:3000/node_modules/angular/angular.min.js:41:364)
at http://localhost:3000/node_modules/angular/angular.min.js:88:341
at http://localhost:3000/node_modules/angular-ui-router/release/angular-ui-router.min.js:7:23742 <div class="template ng-scope" ui-view="">

Here is my index.html:

<!DOCTYPE html>
<html lang="en" ng-app="FriendZone">
<head>
<meta charset="UTF-8">
<title>Hello</title>
<link rel="stylesheet"       href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-csp.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="public/stylesheets/style.css">
</head>
<body>
<div class="template" ui-view></div>

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js">    </script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>

<script src="front/app.js"></script>
<script src="front/navigation/navigation-controller.js"></script>
<script src="front/landing/landing-controller.js"></script>
<script src="front/search/search-controller.js"></script>
<script src="front/profile/profile-controller.js"></script>
<script src="front/admin/admin-controller.js"></script>
</body>
</html>

And here is my admin controller:

    (function () {
angular.module('FriendZone').controller('AdminController', ['$scope', '$state', '$http', 'ui.bootstrap',
    function ($scope, $state, $http, $view) {
        $scope.getUsers = function() {

        };

        $scope.getUsers();
    }]);

I'm still quite new to Angular so it might be something really simple. Thank you in advance!

Edit: Routing code (app.js):

    angular.module('FriendZone', ['ui.router', 'ui.bootstrap'])
    .config(function($stateProvider, $urlRouterProvider){
        $urlRouterProvider.otherwise('/landing');
        console.log("hello");
        $stateProvider.state('landing', {
            url: '/landing',
            templateUrl: 'front/landing/landing.html',
            controller: 'LandingController'
        }).state('search', {
            url: '/search',
            templateUrl: 'front/search/search.html',
            controller: 'SearchController'
        }).state('profile', {
            url: '/profile',
            templateUrl: 'front/profile/profile.html',
            controller: 'ProfileController'
        }).state('admin', {
            url: '/admin',
            templateUrl: 'front/admin/admin.html',
            controller: 'AdminController'
        });
    });
Solution

  • Inject ui.bootstrap module dependency in your module initialization not in your controller. Check for dependency injection in controller too.

          angular.module('FriendZone',['ui.bootstrap']).controller('AdminController', ['$scope', '$state', '$http',
        function ($scope, $state, $http) {
         $scope.getUsers = function() {

        };

       $scope.getUsers();
}]);