Search code examples
javascriptangularjssingle-page-applicationangularjs-routing

How to avoid $compile:tpload errors on 401 status code response


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.


Solution

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