55

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>
Improve this question

7 Answers 7

Reset to default
112

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

7 Comments

Thanks for the tip. I assume all i needed was ui-bootstrap-0.1.0.js didn't know i also need ui-bootstrap-tpls-0.1.0.js. Only if bootstrap-ui have noted that the both js files is also needed.
You don't need both - you choose one or the other. One has all the javascript + templates, one has only the javascript. And you're right, we do need to tell this in the main README, not just the gh-pages readme.
I also found that you need to list the tpls dependency when you start up your app: angular.module('YourApp', ['ui.bootstrap.tpls']);
@Andy Joslin is there a way to override where it bootstrap looks for templates? for example if I had a views or partials folder could I somehow map to either of those locations?
I didn't get I have to add 'Directive' to the directive name m( ....this helped: Experiment: Decorating Directives
|
67

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 :-).
Improve this answer

5 Comments

That ui.boostrap.tpls part is a huge step. I've wasted like 3 hours trying to get this to work.
Holy hell.... I've waisted 3-4 hours trying to figure out why the hell the templates would not load... thank you.
Glad it helped, Brady. I force myself if I have an issue for more than 15 mins, - ask on stack. It's not very easy to succeed. Good luck and do not hesitate to ask :-)
omg ive spent so much time on this....from the bottom of my soul and heart, thank u!
Injecting 'ui.bootstrap.tpls' in the app is key. I had only injected 'ui.bootstrap' so when I did both it worked. Can't thank you enough.
12

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

Improve this answer

1 Comment

Wow....I can't believe I just spent 2 hours trying to get a modal to open...all because of a few characters. Thanks!
9

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.

Improve this answer

Comments

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.

Improve this answer

1 Comment

That "XXXXXXX-tpls.js" was the trick, searched on the angular-bootstrap pages and can see it there now but was so not obvious.
0

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.