ui-bootstrap-tpls failed to load template

Question

I've inherited an angular project, and it's having problems loading the ui-bootstrap-tpls modules.

For each directive it's trying to use from bootstrap, I get something similar to the following:

Error: [$compile:tpload] Failed to load template: template/datepicker/popup.html

I've read about the need to include the tpls version of the ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js (instead of ui-bootstrap.js)), but having done that as well as every permutation of module injected into my module as a dependency (ui.bootstrap, ui.bootstrap.tpls, template/datepicker/datepicker.html'), but I can't beat it.

Here're my includes:

<html class="no-js" ng-app="hiringApp">
<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="layout" content="IRLayout">

    <!-- styles IRLayout-->
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
    <!-- BootStrap -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- font-awesome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="@Url.Content("~/content/css/layout.css")">
    <link rel="stylesheet" href="@Url.Content("~/content/css/normalize.css")">
    <link rel="stylesheet" href="@Url.Content("~/content/css/main.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/Upload.css")">

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/styles.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/site-specific.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/rating.css")">

    <!-- Upload -->
    @*<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Upload.css")">*@

    <!-- Header Scripts-->
    <!-- Jquery & Jquery UI -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script src="@Url.Content("~/Scripts/Vendor/underscore-min.js")"></script>

    <!-- BootStrap -->
    <!-- Validate -->
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

    <!-- Analytics -->
    <script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>

    <!-- Angular -->
          <!--  
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"></script>
          <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
            -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>

    <script src="@Url.Content("~/Scripts/app.js")"></script>
    <script src="@Url.Content("~/Scripts/controllers.js")"></script>
    <script src="@Url.Content("~/Scripts/directives.js")"></script>
    <script src="@Url.Content("~/Scripts/filters.js")"></script>
    <script src="@Url.Content("~/Scripts/services.js")"></script>
    <script>
        angular.module("hiringApp").constant("$userProvider", @Model.User.SystemRoles);
        angular.module("hiringApp").constant("$jobProvider", '');
    </script>

    <!-- Upload -->
    <script src="@Url.Content("~/content/js/plupload.full.js")"></script>
    <script src="@Url.Content("~/content/js/UploadImage.js")"></script>

    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
    <script src="~/Content/js/audio/irAudioRecorder.js"></script>
    @RenderSection("script", required: false)
</head>

Here's my app module:

var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);

Here's the error:

GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
    at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
    at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
    at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24)

Please delete this question. As I mentioned, I inherited this project, and for some reason, it had a line that deleted everything out of the template cache. Couldn't believe it. — Glenn Bullock, Oct 14 '14 at 11:29
Oh, and for the record, you do NOT need to inject ui.bootstrap.tpls into your app. ui.bootstrap does that. Simple include the tpls js file not the ui.bootstrap...js. — Glenn Bullock, Oct 14 '14 at 11:34

score 29 · Answer 1 · answered Mar 13 '16 at 16:05

29

I just wanna post my solution for this error.

include the tpls version of ui.bootstrap

src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"

apparently the none tpls version doesn't include those templates.

when you inject it into you app, make sure you inject ui.bootstrap and not ui.bootstrap.modal

angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);

for more info rtfm ;)

answered Mar 13 '16 at 16:05

Jonny Rimek

1,061
11
20

2

The first option (include the tpls version of ui.bootstrap) worked for me – Lucas Apr 04 '16 at 12:35

score 22 · Answer 2 · edited May 23 '17 at 11:46

I had a very similar issue and was able to resolve it thanks to your comment, Glenn. Therefore I would like to wrap this up into a more general answer that is hopefully helpful to many others:

If UI Bootstrap templates fail to load and you have already double-checked that you have included the right module from the right JS file (and only it) into your app, check if the template cache is disabled/broken for some reason.

There are multiple ways to disable or clear the cache, and one may not be aware that this is happening at all.

In my case modal dialogs weren't opening with error messages like Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html.

I had started off from a great template project downloaded from the JBoss Developer page, which had the following lines included in the app definition:

var xpApp = angular.module('kitchensink', ['ui.bootstrap',...])
.config(... {
    /*
     * Use a HTTP interceptor to add a nonce to every request to prevent MSIE from caching responses.
     */
    $httpProvider.interceptors.push('ajaxNonceInterceptor');
...

.factory('ajaxNonceInterceptor', function() {
// This interceptor is equivalent to the behavior induced by $.ajaxSetup({cache:false});

var param_start = /\?/;

return {
    request : function(config) {
        if (config.method == 'GET') {
            // Add a query parameter named '_' to the URL, with a value equal to the current timestamp
            config.url += (param_start.test(config.url) ? "&" : "?") + '_=' + new Date().getTime();
            }
            return config;
        }
    }
});

Once I removed the interceptor, the modal dialogs were showing.

Thanks @Joe7! Your answer led me on the proper way to solve a similar issue I have. The HTTP interceptor was the cause. **Instead of removing the interceptor, I added a condition to bypass any url that doesn't start with `/`** — Rubens Mariuzzo, May 11 '15 at 20:46
For an angular newbie, this problem led me to learn $templateCache which I had no idea that existed... — addlistener, Oct 04 '15 at 09:25
@RubensMariuzzo I would also like to bypass the interceptor for the bootstrap resources (the urls that don't start with /), can you show me your interceptor ? thanks — 1977, Jun 05 '16 at 11:50

score 5 · Answer 3 · answered Jul 18 '16 at 09:43

I also had this issue but I was only using the tpls version of ui.bootstrap. In my case the issue was a cache busting module ngCacheBuster.

In the network tab I could see there was cachebuster parameter at the end of the resource call:

/template/window.html?cb=4889764132

In this case, bootstrap did not look into its templatecache but decided to load the file from this location, which of course did not exist.

I solved this by whitelisting all calls to the templates folder from the cachebusting mechanism.

I hope this will be helpful to anyone experiencing this problem and using cachebusting.

Took me 5 hours of poking around on a new and unfamiliar project , until I found your post. Thank you !! — JavaHead, Jul 23 '16 at 06:06

score 5 · Answer 4 · answered Feb 20 '17 at 16:29

5

Include ui.bootstrap.tpls right below ui.bootstrap

answered Feb 20 '17 at 16:29

Vigneshwaran Markandan

947
1
16
37

score 4 · Answer 5 · answered Aug 07 '16 at 08:36

4

make sure you have included not only ui-bootstrap.js, as well ui-bootstrap-tpls.js

answered Aug 07 '16 at 08:36

Michael Kisilenko

491
2
6
15

George · Answer 6 · 2017-06-03T17:02:31.770

2

For me it was the interceptor that was producing the error i had to add the below code to make it ignore the calls that are not made to my api:

if (config.url.indexOf('templates/') == 0 || config.url.indexOf('uib/') == 0) 
{
   console.log('ignoring '+config.url);
   return config;
}

edited Jun 03 '17 at 17:02

answered Jun 03 '17 at 16:09

George

716
1
12
29

This is not a solution to the problem. You simply state what your issue was. Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – Noel Widmer Jun 03 '17 at 16:29
1

sorry for that :) i hope it is better now? – George Jun 03 '17 at 17:12

blogs4t · Answer 7 · 2016-10-05T16:36:14.500

1

Yep. I solved this issue like this.. and by including ui-bootstrap-tpls.js

angular.module('mainModule', ['ui.bootstrap', 'sub-module']);
angular.module('sub-module', ['ui.bootstrap.modal']);

However i am not sure if other cases like template-caching will cause the issue or not. At least not for me..

edited Oct 05 '16 at 16:36

answered Oct 05 '16 at 16:30

blogs4t

2,329
5
20
33

ui-bootstrap-tpls failed to load template

7 Answers7

Linked