bower transitive dependency not added for angular

Question

I am not sure how it works, so pardon me for my rough question. I am playing with angular, and noticed some undesired behavior with bower. I created my application with yeoman, and using bower for dependency management. There is a section in the index.html file which should be managed by bower :

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/select2/select2.js"></script>
<script src="bower_components/angular-ui-select2/src/select2.js"></script>
<script src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
<!-- endbower -->

I noticed that the transitive dependencies are not added to this list. For example angular-ui-tinymce depends on tinymce. Even though tinymce is installed as transitive dependency, it is not included on the index.html file, so I have to include it myself. But this defeats the porpuse of the practice of managing the script include with bower (ie. if I uninstall angular-tinymce, bower will remove its script, but my manually added tinymce script is going to hang in there.

It is possible to tell bower to add the transitive dependencies in the index.html file? Or it is a bad idea and it should be managed by hand? What is the best practice in community here

Answer 1

This is actually a Grunt task called grunt-bower-install that's doing the inserting into your HTML. It's configured in your Gruntfile.js as bower-install, then probably run as part of grunt serve. It can also be called directly: grunt bower-install.

As long as you have a Bower component installed and saved in your bower.json, it and its dependencies will be injected into your HTML in the order that matches their relationship. The only time this won't work, however, is when a Bower component doesn't specify a main property in its own bower.json file.

So, to be clear, you have a bower.json that lists the dependencies of your app. Additionally, each dependency you list most of the time will have its own bower.json that lists its dependencies (if any), and a main property, that tells things like grunt-bower-install what file to inject into the HTML. As soon as one of these dependencies fails to follow this convention of specifying main, grunt-bower-install loses its magic.

In the case of angular-ui-tinymce, it does indeed list tinymce as a dependency, but tinymce is not configured with a bower.json file. Thus, there is no bower.json with a main property to tell grunt-bower-install what file out of all these to inject.

The best option I can see is manually writing out the <script> tag yourself, like you said, and just manually removing it in the event you decide not to use it. At the very worst, when grunt-bower-install doesn't work, it's still just the web development we've been used to all of these years. :)