Why is my $templateCache setup not working with new Angular router? - angularjs

Question

I cannot understand why my $templateCache setup is not working...
See this plnkr. I used it with the new Angular router, where I have my home component template in the $templateCache. The app.js file looks like this:
var app = angular.module('app', ['ngNewRouter','app.home']);
app.run(['$templateCache', function($templateCache) {
$templateCache.put('components/home/home.html', '<h2>The home page</h2>{{home.test}}');
}]);
app.controller('AppController', ['$router','$templateCache', AppController]);
function AppController($router,$templateCache) {
var vm = this;
console.log("The template looks like this:",$templateCache.get('components/home/home.html'));
$router.config([{
path: '/',
component: 'home'
}]);
}
My components/home/home.js file:
angular.module('app.home', [])
.controller('HomeController', [HomeController]);
function HomeController() {
var vm = this;
vm.test = "String from the home controller";
}
The error message I get is:
http://run.plnkr.co/OFd5k46BCkBdnfkK/components/home/home.html 404 (Not Found)
Any ideas?

Answer 1

I'm not familiar with ngNewRouter, and it seems that it uses some convention-over-configuration approach in looking up a template (I don't see anywhere else where the template URL is specified), but if you look closely at the error message, it says:
Failed to load template: ./components/home/home.html (HTTP status: 404 Not Found)
(Notice the preceding ./) So, change the cache key accordingly:
$templateCache.put('./components/home/home.html', '<h2>The home page</h2>{{home.test}}');
EDIT:
And, in fact, the documentation of ngNewRouter does specify the default (i.e. conventional) behavior:
The default behavior is to dasherize and serve from ./components. A component called myWidget uses a controller named MyWidgetController and a template loaded from ./components/my-widget/my-widget.html.