Angular / grunt failed to load template

Question

I recently introduced angular directives into my yeoman app for templating, and everything works fine if I grunt serve the normal dev version of the app, but when I build the 'dist' folder with grunt and serve it, the html in the directives of my app don't appear on the page and the console logs this error:

Failed to load resource: the server responded with a status of 404 (Not Found)

vendor.6e8f248d.js:5 Error: [$compile:tpload] Failed to load template: 
/views/tabdir.html (HTTP status: 404 Not Found)

I read that dependency injection needs to be in an array format so that minification doesn't mess with it, and so I did this for all of my controllers, but the same problem still persists. Eg:

angular.module('MainApp').controller('MainCtrl', ['$scope', 'inputBlur', function ($scope, inputBlur) {

}]);

What is causing my directives to not be loaded correctly by grunt?

Answer 1

I had a similar issue. Remove the first foreslash / in the templateUrl value of your directive, should be like this:

templateUrl:'views/tabdir.html'