Angular UI Bootstrap: not loading templates

Question

I am using Angular UI Bootstrap v1.0.3 with templates included (I chose include templates, I can see the *tpls modules in the source code), yet when I open a modal like this (from within app.run(...)):

var type = "sometype";
$uibModal.open({
    templateUrl: "/partials/" + type + "-dialog.html",
});

I get an error:

angular.min.js:93 GET http://.../uib/template/modal/backdrop.html?sessionid=363192 404 (Not Found)(anonymous function) @ angular.min.js:93r @ angular.min.js:89g @ angular.min.js:86(anonymous function) @ angular.min.js:119r.$eval @ angular.min.js:133r.$digest @ angular.min.js:130r.$apply @ angular.min.js:134g @ angular.min.js:87T @ angular.min.js:92w.onload @ angular.min.js:93 angular.min.js:107

Error: [$compile:tpload] http://errors.angularjs.org/1.4.8/$compile/tpload?p0=uib%2Ftemplate%2Fmodal%2Fbackdrop.html&p1=404&p2=Not%20Found at Error (native)

I tried adding the template manually to my code and added the following code to the top of my app.js:

angular.module("template/modal/backdrop.html", []).run(["$templateCache", function($templateCache) {
     $templateCache.put("template/modal/backdrop.html", "<div class=\"modal-backdrop\"></div>");
}]);

still the same error

I added the template url and found the problem. The template cache does not work with query parameters and I had a request interceptor that would add a query parameter to each request. — Eike Cochu
– Eike Cochu, Commented Jan 12, 2016 at 13:57

Eike Cochu · Accepted Answer · 2016-01-12 13:56:19Z

I found the error.

The problem was that the template was requested using query parameters that I added with a request interceptor. I added an exception to that interceptor matching the template url prefix and now it works.

var noSessionIdUrls = [
    "uib/template",
    "template"
];

app.config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push( function ($q, $injector, $rootScope) { 
        return {
            request: function(config) {
                for(var i = 0; i < noSessionIdUrls.length; i++) {
                    if(config.url.startsWith(noSessionIdUrls[i])) {
                        console.log("request interceptor: omitting session id");
                        return config;
                    }
                }

                config.url = config.url + '?sessionid=' + window.sessionid;
                return config;
            }
        };
    });
}]);

Collectives™ on Stack Overflow

Angular UI Bootstrap: not loading templates

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related