-1

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="[email protected]"></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="[email protected]" 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="[email protected]" 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?

Improve this question
3
  • 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? Commented Apr 1, 2016 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? Commented Apr 1, 2016 at 18:26
  • @estus This app does not use wiredep. The setup includes node.js, yeoman, Grunt, and bower. Commented Apr 1, 2016 at 18:30

1 Answer 1

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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?
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)
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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.