Angular bootstrap injector error

Question

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'
        });
    });

Use non-min.js version when developing, which will give you more clue when things went wrong. — zc246
– zc246, Commented Mar 30, 2016 at 16:23

Arun · Accepted Answer · 2016-03-30 15:48:25Z

1

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();
}]);

answered Mar 30, 2016 at 15:48

Arun

1,1856 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Andrew Xia Over a year ago

Hi, so I plugged in your code however now nothing renders but there aren't any errors coming up. Do you know what might be wrong? Thanks for your help!

Andrew Xia Over a year ago

I've added routing code in the post, it's in the app.js file in my setup.

Arun Over a year ago

Have you added default state .state('STATE_NAME', {url: '/',templateUrl:'index.html',controller: 'YOUR_CONTROLLER'})

Andrew Xia Over a year ago

Okay so I have fixed the injection error and the blank page. However when I try to use uib-tabset and any bootstrap directives. Nothing shows up?

Andrew Xia Over a year ago

This is the bit of html that's problematic: <uib-tabset active="active"> <uib-tab index="1" heading="Static title 1 ">Static content 1 </uib-tab> <uib-tab index="2" heading="Static title 2 ">Static content 2 </uib-tab> <uib-tab index="3" heading="Static title 3 ">Static content 3 </uib-tab> </uib-tabset>

rabruce · Accepted Answer · 2016-03-30 15:53:18Z

0

You need to include the dependency at the module level, which is usually defined in the app.js file. The controller uses code defined in dependencies, which are injected when you initialize the module in the module definition. Then in a separate file, which you have linked, you call the module definition which pulls all the dependencies you already have defined.

answered Mar 30, 2016 at 15:53

rabruce

1331 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular bootstrap injector error

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related