ui-sref not working state angularjs

Question

I'm working on something and I want to redirect the content to a page in angularjs, but I face the following error:

angular.js:12477 Error: Could not resolve 'dashboard.home' from state 'dashboard'

My code:

.state(
        'dashboard.home',
        {
            url: '/home',
            views: {
                "content@main": {
                    templateUrl: '/home'
                    // controller: 'HomeController',
               }
            }
        }
    )

.state(
        'dashboard',
        {
            url: '',
            parent: "main",
            views: {
                "sidebar@main": {
                    templateUrl: "/sidebar/view"
                }
            }
        })

sidebar.html.twig

 <li>
      <a ui-sref="dashboard.home">Home <span class="sr-only">(current)</span></a>
 </li>

The state 'dashboard.home' exists, why the error appears?

Answer 1

I think you're probably trynig to use views to split header/footer/siderbar from the content which is the only thing to change according states.

I don't have the answer of what exactly is your problem but I may have an answer to a more broader question that you might are trying to solve :

How to mix views for header/content/footer and nested stated for content navigation ?

Solution : use views only for header/content/footer, use '@' to insert direct child by using the default view (no name) and use grand child as you would do normally without views

// root state
.state('home', {
    url:'/home',
    views:{
        'header':{
            templateUrl: 'template/header.html',
            controller:'HeaderCtrl'

        },'sidepanel':{
            templateUrl: 'template/sidepanel.html', 
            controller:'SidePanelCtrl', 
        },'footer':{
            templateUrl: 'template/footer.html'
        }
    },
    'abstract':false
  })
  //direct child
  .state('home.main', {
      url:'/main',
      // need that for every direct child of home
      views:{
          '@':{templateUrl: 'template/main.html',
              controller: 'MainCtrl'
          }
      }        
  })
  //grandchild
  .state('home.main.child1', {
      url:'/child1',
      templateUrl: 'template/child1.html',
      controller: 'Child1Ctrl'
        // NO view anymore for grand child!!
      }        
  })

And the Relevant HTML

<section id="header">
    <!--- not container -->
    <div data-ui-view="header"></div>
</section>
<section id="content">
    <div class="row clearfix">
        <div id="mySidebar>
            <div data-ui-view="sidepanel"></div>
        </div>
        <div id="myContent">
            <div data-ui-view></div>
        </div>
    </div>
</section>
<section id="footer">
    <div data-ui-view="footer"></div>
</section>

Answer 2

The templateUrl expects the relative path of the html template that you want to render.

.state(
    'dashboard.home',
    {
        url: '/home',
        views: {
            "content@main": {
                templateUrl: 'home.html'
           }
        }
    }).state(
    'dashboard',
    {
        url: '',
        parent: "main",
        views: {
            "sidebar@main": {
                templateUrl: "sidebar/view.html"
            }
        }
    })