Вложенное состояние StateProvider, пользовательский интерфейс состояния второго уровня не отображается

Question

Я создаю модуль с URL-адресом до второго уровня.То, что я имел в виду об уровне, это;localhost:5000/MyProject#/0/sub_module/0, где localhost:5000/MyProject#/0 - первый уровень, а /sub_module/0 - второй уровень.

У меня есть кнопка для запуска (ui-sref) перехода на второй уровень.Он дает правильный URL-адрес (при нажатии кнопки), однако не отображает templateUrl.

Вот что я получил до сих пор.

//file project.js
$stateProvider
 .state('myproject',{
     abstract: true,
     url: '/',
     template: '<div ui-view></div>'
  })
  .state('myproject.list',{
     url: '',
     templateUrl: 'MyProject/myproject.list.html',
     controller: ['$scope', function($scope){}]
  })
  .state('myproject.detail',{
     url: '{myProjectId: [0-9]{1,10}}'
     templateUrl: 'MyProject/myproject.detail.html',
     controller: ['$scope', function($scope){}]
  }) //this is for the first level
  .state('myproject.detail.submodule',{
     abstract: true,
     url: '',
     template: '<div ui-view></div>'
  })
  .state('myproject.detail.submodule.list',{
     url: '/sub_module',
     templateUrl: 'MyProject/myproject.detail.submodule.list.html',
     controller: ['$scope', function($scope){}]
   })
  .state('myproject.detail.submodule.detail',{
     url: '/{subModuleId: [0-9]{1,10}}',
     templateUrl: 'MyProject/myproject.detail.submodule.detail.html',
     controller: ['$scope', function($scope){}]
   });//this being the second level


//button code snippet
<button class="btn" ui-sref="myproject.detail.submodule.list">GO TO SUB 
MODULE</button>

Он читаетurl но templateUrl.