“Invalid Template Root” error

Question

I am using AngularJS for the front end of my Play 2.0 application. I loosely followed Paul Dijou's blog post for setting up HTML5 routing. Basically, Play framework serves the index.html file for every unknown route, and from there AngularJS routing takes over.

In my application I have moved my navigation bar into a directive. This works fine when I initially load my application. But when I do a refresh after navigating "deeper" into my Angular app, Angular throws an Invalid Template Root error for my `navbar directive. As you can see below, the template has exactly one root element, just as required.

I already checked this question , but I am using the templateUrl attribute.

Plunker (Content stripped, but otherwise accurate)

Can anyone tell me what I am doing wrong?

Directive:

myDirectives.directive("navbar", function() {
    return {
        restrict : "E",
        replace : true,
        templateUrl : "assets/app/partials/navbar.html"
    };
});

Template ( navbar.html ) :

<div ng-controller="NavbarCtrl">
    <nav class="navbar navbar-fixed-top">
        ... (There is more content here but the problem occurs even if this content is removed)
    </nav>
</div>

Answer 1

Try replacing your relative template URL with an absolute one:

// Note the leading '/'.
// You could also try a full URL, although that makes development hard.
templateUrl : "/assets/app/partials/navbar.html"