javascript - Angular HTTP interceptor executed for embedded ng-templates

Question

I have an Angular interceptor working:

factory('myHttpInterceptor', function ($q, $location, $rootScope) {
// do something
return function (promise) {
    return promise.then(function (response) {
        // do something
        return response;
    }, function (response) {
        // do something
        return $q.reject(response);
    });
};
})

and one big html file which contains templates like <script type="text/ng-template" id="home-template">. Unfortunately my HTTP interceptor intercepts not only loading HTTP requests but also loading templates (which are already loaded in html file) for controllers which are defined like when('/', {controller:MainController, templateUrl:'home-template'}). Is there a way how to make interceptor intercepting only HTTP requests or how to recognize whether I am loading something from server or just a template?

Answer 1

I ran in to this issue as well. We were adding query strings to all our $http calls with an interceptor. It ended up breaking our templates, because when looking in $templateCache the template name with query string wasn't being found (the template was originally cached with just using it's id).

Angular $httpProvider interceptors will intercept $http module calls. These $http calls are not necessarily real HTTP GET / POST requests they can also be calls to get templates in $templateCache. It seems like when an embedded template is being referenced, first the $http module is used (which run the interceptor first) and then the $http module will look in $templateCache to see if the template is already cached. If $http finds out the item exists in $templateCache it will return it, if not it will attempt to make an actual HTTP request to get the template.

Our solution was to include the $templateCache module in our interceptor and manually check first if the http request exists in $templateCache. If the request is not in $templateCache add our query string, if it is in $templateCache then simply return it.

$httpProvider.interceptors.push(function($templateCache) {
    return {
        'request' : function(request) {
            // If the request is a get and the request url is not in $templateCache
            if(request.method === 'GET' && $templateCache.get(request.url) === undefined) {
                // Item is not in $templateCache so add our query string
                request.url = request.url + '?time=' + new Date().getTime();
            }
            return request;
        }
    };
});