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 som

Answer 1

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.