Inheritance does not work when using angular-ui-router state

Question

I have the following configuration for the routes:

$stateProvider
        .state('login', {
            public: true,
            url: '/login',
            templateUrl: 'app/src/components/bo/areas/login/login.view.html',
            controller: 'LoginController',
            controllerAs: 'vm'
        })
        .state('app', {
            public: false,
            abstract: true,
            templateUrl: 'app/src/core/views/app.view.html'
        })
        .state('app.common', {
            public: false,
            abstract: true,
            views: {
                'sidenav': {
                    templateUrl: 'app/src/components/bo/areas/common/sidenav/sidenav.view.html',
                    controller: 'SidenavController',
                    controllerAs: 'sidenavvm'
                },
                'toolbar': {
                    templateUrl: 'app/src/components/bo/areas/common/toolbar/toolbar.view.html',
                    controller: 'ToolbarController',
                    controllerAs: 'toolbarvm'
                }
            }
        })
        .state('app.common.dashboard', {
            public: false,
            url: '/dashboard',
            views: {
                'content': {
                    templateUrl: 'app/src/components/bo/areas/dashboard/dashboard.view.html',
                    controller: 'DashboardController',
                    controllerAs: 'vm'
                }
            }
        })
    ;

Notice that the route /dashboard has 2 inheritances: app and common (app.common.Dashboard).

This was necessary because after login the client is redirected to Dashboard, but it is necessary to include in HTML the parts common to all pages, such as sidenav and the toolbar, hence the need for the second inheritance common.

The app.view.html has the following structure:

<div ui-view="sidenav"></div>
<div ui-view="toolbar"></div>
<div ui-view="content"></div>

When accessing Dashboard, the views sidenav and toolbar are filled, but the view content is blank , but Dashboard HTML should appear.

I already checked and the path to the HTML file is correct.

What I did wrong?

Answer 1

In the documentation of lib ui-router found the solution.

Just add the state in the view name by separating by an arroba (content@app), see:

        .state('app.common.dashboard', {
            public: false,
            url: '/dashboard',
            views: {
                'content@app': {
                    templateUrl: 'app/src/components/havas-bo/areas/dashboard/dashboard.view.html',
                    controller: 'DashboardController',
                    controllerAs: 'vm'
                }
            }
        })//...

In the hierarchy, the dasboard comes after the common, that is, the view content exists in the state app but does not exist in the common, so you need to specify which state the view in which the HTLM should be rendered.