angular ui router state being hit but no template returned

Question

I'm using ng-boilerplate amd have the following folder structure

member
-add
--add.js
--add.tpl.html
-member.js
-member.tpl.html

inside add.js I have the following route defined

 .config(function config( $stateProvider,USER_ROLES ) {
        $stateProvider.state( 'member.add', {
            url: '/member-add',
            views: {
                "main": {
                    controller: 'AddMemberCtrl',
                    templateUrl: 'member/add/add.tpl.html'
                }
            },
            data:{ pageTitle: 'Add member'

            }
        });
    })

and inside member.tpl.html i have a link defined to the route

<a href ui-sref="member.add" class="btn btn-primary">Add member</a>

clicking on the above link changes the url to '#/member/member-add' and changes the page title to match 'Add member' as defined above, but file member/add/add.tpl.html is not loaded in. I can't see any errors in the console and grunt builds it fine, I can see a reference to the file in templates-app.js:

angular.module("member/add/add.tpl.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("member/add/add.tpl.html",
    "Add members");
}]); 

Edit: other routes are fine, its just for routes in a sub-sub-folder i.e app/member/add/

Any ideas why the page is not rendering?

Answer 1

You must have a view named main in your page. Something like:

<div ui-view="main"></div>