Angular ui-router not extending parent view

Question

I am trying to extend a parent view to a child view.

My route.js

let view = {
    '': {
        templateUrl: '/app/content.html'
    },
    'sidebar': {
        templateUrl: '/app/sidebar.html'
    }
};
.state('profile', {
    abstract: true,
    url: '/profile',
    views: view,
    templateUrl: '/app/profile/profile.html'
})
.state('profile.about', {
    parent: 'profile',
    url: '/about',
    views: {
        '': {
            templateUrl: '/app/profile/about.html'
        }
    }
})

My index.html:

<div ui-view></div>

My profile /profile.html:

//all other stuff (header, sidebar, etc)
<div>
    <h1>Profile</h1>
    <div ui-view=""></div>
</div>

My profile /about.html:

<div>
    <h1>About</h1>
</div>

Everything works fine, including the sidebar.

The problem is that the about.htmlpage is showing, but it is not expanding the page profile/profile.html.

Any solutions?

Here is the plunker .

This is slightly different, but it is the same, given that it is route1not displayed, but displayed test.html.

Answer 1

Try as follows:

let view = {
    '': {
        templateUrl: '/app/profile/index.html'
    },
    'content': {
        templateUrl: '/app/content.html'
    },
    'sidebar': {
        templateUrl: '/app/sidebar.html'
    }
};
.state('profile', {
    abstract: true,
    url: '/profile',
    views: view
})
.state('profile.about', {
    parent: 'profile',
    url: '/about',
    views: {
        '': {
            templateUrl: '/app/profile/about.html'
        }
    }
})