ui-bootstrap-tpls failed to load template

ui-bootstrap-tpls failed to load template

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:



@RenderSection(“script”, required: false)

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
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)

Related:  How to change placement of Twitter-Bootstrap tooltip placement after initialization?


Solution 1:

I just wanna post my solution for this error.

  1. include the tpls version of ui.bootstrap


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

  1. 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 😉

Solution 2:

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.

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

Related:  TypeError: $(…).modal is not a function with bootstrap Modal

Solution 3:

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:


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.

Solution 4:

Include ui.bootstrap.tpls right below ui.bootstrap

Solution 5:

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

Solution 6:

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

Related:  Applying CSS styles only to certain elements