Why isn't angular bootstrap being injected?

Question

How do I correctly inject angular bootstrap into an angularjs app?

When I manually include remote versions of the libraries with the following code in index.html, angular bootstrap works:

<!-- start manual dependencies for testing purposes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js" data-semver="1.5.0" data-require="angularjs@1.5.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-cookies.js"></script>
<link data-require="ui-bootstrap@0.13.1" data-semver="0.13.1" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" />
<script data-require="ui-bootstrap@0.13.1" data-semver="0.13.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.1/ui-bootstrap-tpls.js"></script>
<!-- end manual dependencies for testing purposes -->

However, the app stops compiling (meaning that JavaScript does not work at all and only html is served to the browser) when I try to have the dependencies managed automatically.

I read this other posting on the same topic and tried its suggestions as follows, so this is not a duplicate posting:

[user@localhost client]$ bower install angular-bootstrap
bower cached        git://github.com/angular-ui/bootstrap-bower.git#1.2.5
bower validate      1.2.5 against git://github.com/angular-ui/bootstrap-bower.git#*
[user@localhost client]$

Bower then generates the following list of includes in index.html, which replace the manual includes shown above:

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

And bower.json includes the following:

{
  "name": "client",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.4.0",
    "bootstrap-sass-official": "^3.2.0",
    "angular-animate": "^1.4.0",
    "angular-aria": "^1.4.0",
    "angular-cookies": "^1.4.0",
    "angular-messages": "^1.4.0",
    "angular-resource": "^1.4.0",
    "angular-route": "^1.4.0",
    "angular-sanitize": "^1.4.0",
    "angular-touch": "^1.4.0",
    "angular-bootstrap": "^1.2.5"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.0"
  },
  "appPath": "app",
  "moduleName": "clientApp",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  }
}

Since the app compiles and runs JavaScript properly when the http includes at top are used, you really do not need to know how I am injecting ui.bootstrap into the app modules, but I am including as follows for thoroughness:

angular
  .module('app', ['ngAnimate', 'ngRoute', 'ngTouch', 
      'auth', 'home', 'secure', 'public1', 'navigation',
      'ui.bootstrap' ])

What specific changes need to be made to the above in order to successfully inject angular bootstrap into the app from the local bower folders?

Are all files listed in the same order as before, including relative to your application code? Also, is your browser able to find your bower directory? — Tyler, Apr 01 '16 at 17:46
@tyler The browser is certainly able to find the bower directory because the angular app works with the automated build until i try to add angular-bootstrap. The orders are exactly as shown in the OP. Is there any addition file that I should post? — CodeMed, Apr 01 '16 at 18:26
@estus This app does not use wiredep. The setup includes node.js, yeoman, Grunt, and bower. — CodeMed, Apr 01 '16 at 18:30

score 0 · Answer 1 · answered Apr 01 '16 at 20:29

0

I don't know what you're using to automate the file paths, but it's missing the angular-bootstrap main js file. You'll need it and the templates (which you're already including) like so:

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

answered Apr 01 '16 at 20:29

Tyler

11,272
9
65
105

Thank you. I would like to test this without disabling Bower's auto-generation of dependencies into `index.html`. `bower.json` seems to be the file that defines what gets generated. I posted it above. What do I add to `bower.json` in order to generate the includes that you suggest? And is this something I should set manually in `bower.json`, or in a `bower install ...` command, or somewhere else like `GruntFile.js`? – CodeMed Apr 01 '16 at 21:24
Should be in your gruntfile -- this is not a bower issue. Grunt is a build tool, so it's likely the one moving things around. (side note: I'd recommend gulp instead, personally) – Tyler Apr 01 '16 at 21:27
Try searching your various config files for `ui-bootstrap-tpls.js` wherever you see that is a good candidate for where you'd need to add the `ui-bootstrap.js` file into the build process. – Tyler Apr 01 '16 at 21:30

Why isn't angular bootstrap being injected?

1 Answers1