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

Answer 1

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 2

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 3

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.

Answer 4

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 5

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 6

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.