Unknown provider error. how to add angular-bootsrap on angularjs

Question

yo angular
bower install angular-bootstrap --save

added 'ui.bootstrap' in app.js. added

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

in index.html. checked bower.json that it has 'angular-bootstrap'.

now i got

Uncaught Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile

here is my whole code [app/scripts/app.js]

'use strict';

/**
 * @ngdoc overview
 * @name radio2App
 * @description
 * # radio2App
 *
 * Main module of the application.
 */
angular
  .module('radio2App', [
    'ngAnimate',
    'ngCookies',
    'ngRoute',
    'ui.bootstrap'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

[app/scripts/main.js]

'use strict';

/**
 * @ngdoc function
 * @name radio2App.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the radio2App
 */
angular.module('radio2App')
  .controller('MainCtrl', function ($scope) {
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

[bower.json]

{
  "name": "radio2",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.3.0",
    "json3": "^3.3.0",
    "es5-shim": "^4.0.0",
    "angular-animate": "^1.3.0",
    "angular-cookies": "^1.3.0",
    "angular-route": "^1.3.0",
    "angular-bootstrap": "~0.12.0"
  },
  "devDependencies": {
    "angular-mocks": "~1.3.0",
    "angular-scenario": "~1.3.0"
  },
  "appPath": "app"
}

[app/index.html]

.....
    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.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-route/angular-route.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
.....

most of codes are made by yo scaffolding tool.. i added just few line as i mentioned.

please put your whole code here. It seems ngAnimate error or $q error as well. but not sure. Inject ui.bootstrap as dependency in your angular.module line as mentioned below else come up with soruce code. — micronyks
– micronyks, Commented Jan 11, 2015 at 16:58

karthik pamidimarri · Accepted Answer · 2015-01-11 16:16:46Z

1

angular.module('myModule', ['ui.bootstrap']);

you should include BootStrap Dependency in your Module Configuration like above code,it's necessary to add when you are using BootStrap

answered Jan 11, 2015 at 16:16

karthik pamidimarri

3052 silver badges12 bronze badges

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

4 Comments

DK2 Over a year ago

I already included 'bootstrap dependency' in app.js, and double-checked BUT still same error..

DK2 Over a year ago

bower uninstall angular-boostrap, delete everything about this from 'scripts/*.js', 'app.js' 'bower.json' 'index.html' BUT got same error.. why?? where remains angular-boostrap things??

karthik pamidimarri Over a year ago

Can you provide Plnkr Example

DK2 Over a year ago

finally solved.. it was problem from installing angular-boostrap. bower asekd me which version and version will use.. i selected right one, then everything works soooo well!! :D

Collectives™ on Stack Overflow

Unknown provider error. how to add angular-bootsrap on angularjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related