Angular ui bootstrap directive template missing

Question

I'm currently testing out angular bootstrap-UI locally on my machine. When I try to recreate the example of accordion and dialog box. I get this error message in my console saying that template is missing.

Example of error: 404 Not Found - localhost/angular/template/message.html

When I look into ui-bootstrap-0.1.0.js the directive have a template URL.

What's the purpose of the templateURL for the directive?

Are those template suppose to be included when I download the whole angular bootstrap-UI zip file?

Am I missing other files that I should have include in my header?

<link rel="stylesheet" href="includes/css/bootstrap.css">
<script src="includes/js/angular.js"></script>
<script src="includes/js/ui-bootstrap-0.1.0.js"></script>

Answer 1

You have two choices:

1. If you don't want to make your own templates and want the built in ones, you should download the ui-bootstrap-tpls-0.1.0.js file - this injects all the templates so they are pre-cached into your app: https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322

2. If you do want to make some of your own templates, create a templates folder in your app, and download the templates from the angular-ui/bootstrap project. Then overwrite the ones you want to customize on your own.

Read more here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

edit:

You can also download bootstrap-tpls.js and still overwrite some of the directive's templateUrls with your own, using an AngularJS decorator to change the directive's templateUrl. Here's an example that change's datepicker's templateUrl:

http://docs.angularjs.org/api/AUTO.$provide#methods_decorator

myApp.config(function($provide) {
  $provide.decorator('datepickerDirective', function($delegate) {
    //we now get an array of all the datepickerDirectives, 
    //and use the first one
    $delegate[0].templateUrl = 'my/template/url.html';
    return $delegate;
  });
});

Answer 2

My 5 cents after wasting 2 hours with this problem. You should:

1. Go to http://angular-ui.github.io/bootstrap/. Click on create a custom build and choose the features you use. (There is no point to pull 60k for 1 item).
2. Include custom.tpls.js in my case it was ui-bootstrap-custom-0.10.0.min.js
3. In your Angular module include 'ui.bootstrap.yourfeature' in my case it was 'ui.bootstrap.modal'

4. and also include 'ui.bootstrap.tpls'. So my module complete depencies look like this:

   var profile = angular.module("profile",[ 'ui.bootstrap.modal', 'ui.bootstrap.tpls' ]);

5. Save 2 hours and be happy :-).

Answer 3

This error message also seems to occur in another scenario, as demonstrated here: http://plnkr.co/edit/aix6PZ?p=preview

If you state your module dependency to be only 'ui.bootstrap.dialog' instead of 'ui.bootstrap', angular coughs up a template not found error.

Here's an official explanation of the 'why': https://github.com/angular-ui/bootstrap/issues/266

Answer 4

I was facing the same error although in my index.html both required scripts were defined. Finally, I changed the loading order by setting ui-bootstrap.js script to be loaded first and the ui-bootstrap-tpls.js after it like this. That fixed the problem. However, later I´ve noticed (as commented above) that only one lib is required. So I removed the ui-bootstrap.js.

Answer 5

My issue was that I was still including the template-url in the HTML, like this:

<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">

This caused my browser to hang - which is weird but that's the way it was.

In summary, what I did:

bower install bootstrap --save
bower install angular-bootstrap --save

In my index.html (note the "-tpls"):

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

Then in my Angular app:

angular
  .module('myApp', ['ui.bootstrap'])

Then just remove the template-url in the HTML:

<div uib-accordion-group class="panel-default" heading="Custom template">

Boom, works.

Answer 6

The likely cause of this issue is the accepted answer but one other possible cause of this issue is something I ran into and I wanted to post in case anyone else ran into the same secondary cause to the problem.

The symptoms were exactly the same, 404 on the bootstrap templates but in my case I actually included the 'ui-bootstrap-tpls.min.js' javascript file. The problem is that I also included the non template version, 'ui-bootstrap.min.js'. Once both were included, and I suspect order was important, one would displace the other. In my case, the non-template version displaced the templated version causing the 404 issues.

Once I made sure to ONLY INCLUDE 'ui-bootstrap-tpls.min.js' all worked as expected.

Answer 7

I've got to say reading the comments and adding my experience from 10 hours last night. Avoid UI Bootstrap it seems much more effort than its worth.

Also having read through their repo issues and comments, the whole manner in which the project has been conducted seems to be at odds with a simple and easy to use tool. Although I'm sure it started out with the best intentions, perhaps this is a module to avoid if at all possible.

Of course there is the caveat this is an opinion, perhaps we will find out if others feel the same.