Directive templateUrl redirects to /

Question

I am trying to use templateUrl in a directive to load a partial, but when visiting the URL for the template, I am getting redirected back to /. So the partial loads the entire page instead of the requests partial.

add-to-cart.js

.directive('addToCart', function() {
    return {
        restrict: 'E',
        scope: {

        },
        replace: false,
        templateUrl: 'src/common/add-to-cart/add-to-cart.tpl.html',
        link: function(scope, element, attrs) {

        }
    };
});

app.js

$urlRouterProvider.otherwise( '/' );

Why is this happening and how can I solve it?

Answer 1

What I had to do to solve this issue was using an id as templateUrl instead of the correct path. I am not completely sure if it's always like this or if it's because I'm using the grunt angular template engine, but this change solved the problem:

templateUrl: 'add-to-cart/add-to-cart.tpl.html',

Another solution was to inject the templateCache and load the template by it, using the exact same id and with the exact same result. So all in all, I assume it does the exact same thing.

.directive('addToCart', ['$templateCache', function($templateCache) {
...
    templateUrl: $templateCache.get('add-to-cart/add-to-cart.tpl.html'),
...
}]);