Can't load angular-bootstrap module in boilerplate angularjs app

Question

I started an AngularJS project to get a feel for it by starting with angular-seed.

I am trying to load up angular-bootstrap, but when I add the the module in my app.js file dependencies:

angular.module('myApp', [
  'ngRoute',
  'ui.utils',
  'ui.bootstrap', //<------
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'
])

I get the following error when I run my app:

[$injector:nomod] Module 'ui.bootstrap' is not available! 
You either misspelled the module name or forgot to load it. 
If registering a module ensure that you specify the dependencies as the second argument.

I have angular-bootstrap installed and the files are in my app/bower-components directory as:

├── angular-bootstrap
│   ├── bower.json
│   ├── ui-bootstrap.js
│   ├── ui-bootstrap.min.js
│   ├── ui-bootstrap-tpls.js
│   └── ui-bootstrap-tpls.min.js

As per the set up from the installation instructions, I have bootstrap.css and angular.js referenced in my index.html file.

I know there was another question that asked about this same error in Error: [$injector:nomod] Module 'ui.bootstrap' is not available! while Karma run in webstorm but that's for running Karma tests, I can't even get the module to load on just running the app.

Not a comment on your issue, but why do you need both ui-bootstrap.js and ui-bootstrap-tpls.js? tpls is the superset, it is ui-bootstrap.js plus templates. — PSL
– PSL, Commented Sep 5, 2014 at 2:41
@PSL, that's just how it is after running bower install angular-bootstrap — roy
– roy, Commented Sep 5, 2014 at 2:45
@PSL - doh, that was it, with the answer below...ok that was my problem. — roy
– roy, Commented Sep 5, 2014 at 2:47
@roy Ok, so any angular application that you load must come after angular.js script reference, because they have dependency on angular. All the best! — PSL
– PSL, Commented Sep 5, 2014 at 2:54

nicmwenda · Accepted Answer · 2014-10-27 11:54:49Z

1

Be sure to have included the link to the js file

<link rel="stylesheet" href="bower_components/html5-boilerplate/css/ui-bootstrap.css">

answered Oct 27, 2014 at 11:54

nicmwenda

1491 silver badge3 bronze badges

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

Comments

riadh zar · Accepted Answer · 2017-08-11 10:30:33Z

0

you should also add bootstrap (bower install bootstrap) to our app and includ

bootstrap/dist/js/bootstrap.min.js in our app

answered Aug 11, 2017 at 10:30

riadh zar

3291 gold badge2 silver badges7 bronze badges

Collectives™ on Stack Overflow

Can't load angular-bootstrap module in boilerplate angularjs app

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related