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

Answer 2

From what I have gathered, you are looking for a way to see if the request involved a template file or not. What you could do is look at the url of the request and see if it contains the path to your partials directory.

Let me know if this is what you were looking for:

var interceptor = ['$location', '$log', '$q', function($location, $log, $q) {
    function success(response) {
        // you can examine the url of the request here
        $log.info(response.config.url)
        return response;
    }

    function error(response) {
        if (response.status === 401) {
            $location.path('/signin');
            return $q.reject(response);
        } else {
            return $q.reject(response);
        }
    }
    return function(promise) {
        return promise.then(success, error);
    }
}];

$httpProvider.responseInterceptors.push(interceptor);