How to avoid $compile:tpload errors on 401 status

Question

We are developing a Single Page Application with AngularJS and ASP.NET MVC Json Rest API.

When an unauthenticated client tries to navigate to a private route (Ex: /Foo/Home/Template) to get a template, it gets a 401 response from the Web API and our AngularJS app automatically redirects it to the login page.

We are handling the 401 with $http interceptor with something like this:

if (response.status === 401) { 
        $location.path(routeToLogin);
        return $q.reject(response);
}

Entering the correct credentials allows the client to get the template.

Everything is working perfectly except for one detail; the Javascript console reports this error:

Error: [$compile:tpload] http://errors.angularjs.org/1.3.0/$compile/tpload?p0=%Foo%2FHome%2FTemplate%2F

AngularJs documentation states this:

Description

This error occurs when $compile attempts to fetch a template from some URL, and the request fails.

In our AngularJs app the request fails but it is by design because the resource is there but it cannot be accessed (401).

Should I move on and accept this kind of error on console or is it possible to mute or shield it in some way?

EDIT:

I have debugged the angular source a little bit and I found what part of the code is raising the exception.
Since we are using TemplateUrl to declare our templates, we are indirectly using the function compileTemplateUrl that makes this call:

$templateRequest($sce.getTrustedResourceUrl(templateUrl))

this leaves the second parameter (ignoreRequestError) of templateRequest undefined.

ignoreRequestError(optional)boolean

Whether or not to ignore the exception when the request fails or the template is empty

When our http interceptor, handling the 401 status code, rejects the promise, the $http.get inside the $TemplateRequestProvider fails and calls this function:

 function handleError() {
        self.totalPendingRequests--;
        if (!ignoreRequestError) {
          throw $compileMinErr('tpload', 'Failed to load template: {0}', tpl);
        }
        return $q.reject();
      }

I believe we can't do anything to prevent the error on console as TemplateUrl does not allow to set the ignoreRequestError flag to false.

I've tried to bypass the reject in case of 401 status code; this fixes the error on console but sadly it has a side effect: an empty template is wrongly cached into the TemplateCache causing othe problems.

Answer 1

You should be able to intercept the call for the template by status and url.

Plunker

app.config(function($httpProvider) {

  var interceptor = function($location, $log, $q) {

      function success(response) {
        // The response if complete
        $log.info(response);
        return response;
      }

      function error(response) {
        // The request if errors
        $log.error(response);
        return $q.reject(response);
      }

      return function(promise) {
        return promise.then(success, error);
      }
    }

  $httpProvider.responseInterceptors.push(interceptor);

});

Answer 2

After some thinking I remembered about decorating in Angular, it solved this problem perfectly:

app.config(['$provide', function($provide) {
  $provide.decorator('$templateRequest', ['$delegate', function($delegate) {

    var fn = $delegate;

    $delegate = function(tpl) {

      for (var key in fn) {
        $delegate[key] = fn[key];
      }

      return fn.apply(this, [tpl, true]);
    };

    return $delegate;
  }]);
}]);

Answer 3

As I see it, you have two options:

Option A)

go with the interceptors. However, to eliminate the compile you need to return success status code inside response error (BAD) OR redirect to the login page inside the interceptor (Good):

app.factory('authInterceptorService', function () {

    var interceptor = {};

    interceptor.responseError = function (rejection) {

        if (rejection.status === 401 && rejection.config.url === "home template url") {

            //BAD IDEA
            //console.log("faking home template");
            //rejection.status = 200;
            //rejection.data = "<h1>should log in to the application first</h1>";

            //GOOD IDEA
            window.location = "/login.html";
        }

        return rejection;
    }


    return interceptor;
});

and on app config:

app.config(['$httpProvider', function ($httpProvider) {

   $httpProvider.interceptors.push('authInterceptorService');
}

Option b)

make the home template public. After all it should be just html mark-up, without any sensible information.

this solution is clean...and perhaps is also possible.