Angular ui bootstrap directive template missing

Solution 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;
  });
});

Solution 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 :-).

Solution 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

Solution 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.

Solution 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.