angularjs: multiple abstract states, redirecting issue

Question

I am trying to merge two abstract states view into one state. Below is my code. Problem is when I go to .../#!/app/user/27/settings it redirect me to .../#!/app/user/27 not stay at user settings.

Angular version 1.6.4

App.js:

module.config(function ($stateProvider, $urlRouterProvider) 
{

    $urlRouterProvider.otherwise('/app/home');
    $stateProvider

        .state("app", {
            abstract: true,
            url: "/app",
            component: "appRouting"
        })


        .state("app.user", {
            url: "/user/:userId",
            component: "userProfileRouting"
        })

        .state("user", {
            abstract: true,
            url: "/user/:userId",
            component: "userRouting"
        })

        .state("app.user.settings", {
            url: "/settings",
            //component: "userSettingsRouting"
            template: "hello"
        });
}

Answer 1

Interesting scenario, here is the solution:

As you can check in Angularjs Nested states: 3 level nesting is possible.

The problem arrives on how angular does the routing, mainly in how ui-view is used to render the routing. Similar to this problem.

The key point is that your state app.user has to have a ui-view wrapping:

<div ui-view>
  ...component code
</div>

Please check the plnkr I created to describe the solution.

Main attention to the contact.detail.html content.