angular-ui-router nested views the page doesn't loading when direct url is used or refresh

Question

I have this plunker which works fine it's better seeing here but there's one bug in there, when navigating to nested state through a clickable link I get the desired behavior, but when refreshing the page or writing the URL and pressing enter the page the page doesn't load for some states. I have the 4 States:

• profile.about
• profile.feed
• profile.user.about
• profile.user.feed

For the first 2 refreshing the page or selecting the URL and pressing enter will load the profile view but not the about view, the second 2 works fine. the router configuration is like this:

$urlRouterProvider.otherwise("/home");
// route 1
$stateProvider.state('home' , {
  url: "/home",
  templateUrl: "home.html"
});
// route 2
$stateProvider.state('profile' , {
  controllerAs: "Profile",
  url:          "/profile",
  templateUrl:  "profile.html",
  controller:   "ProfileController"
});
// user route
$stateProvider.state('profile.user' , {
  controllerAs: "Profile",
  url:          "^/:username",
  controller:   "ProfileController",
  template:     "<div ui-view></div>",
  resolve: {
    username: ['$stateParams', function ($stateParams) {
      return $stateParams.username;
    }]
  }
});
// route 3
$stateProvider.state('settings' , {
  url: "/settings",
  templateUrl: "settings.html"
});
// user about route
$stateProvider.state('profile.about', {
  controllerAs: "About",
  url:          "^/about",
  templateUrl:  "about.html",
  controller:   "AboutController2"
});
// user about route
$stateProvider.state('profile.user.about', {
  controllerAs: "About",
  url:          "/about",
  templateUrl:  "about.html",
  controller:   "AboutController"
});
// user about route
$stateProvider.state('profile.user.feed', {
  controllerAs: "Feed",
  url:          "/feed",
  templateUrl:  "feed.html",
  controller:   "AboutController"
});
$stateProvider.state('profile.feed', {
  controllerAs: "Feed",
  url:          "^/feed",
  templateUrl:  "feed.html",
  controller:   "AboutController2"
});

I'm not in html5mode as seeing in the plunker and I sow this SO but no answer there.
Any help on how to fix this, thanks in advance.

Answer 1

The problem that I found seconds after posting the question is that the route definitions are not ordered correctly.
the state profile.user have a dynamic url parameter so defining the profile.feed or profile.about after the profile.user will result to this error, therefore defining the profile.about and profile.feed hould be before the profile.user like this:

$urlRouterProvider.otherwise("/home");
// route 1
$stateProvider.state('home' , {
  url: "/home",
  templateUrl: "home.html"
});
// route 2
$stateProvider.state('profile' , {
  controllerAs: "Profile",
  url:          "/profile",
  templateUrl:  "profile.html",
  controller:   "ProfileController"
});
// route 3
$stateProvider.state('settings' , {
  url: "/settings",
  templateUrl: "settings.html"
});
// user about route
$stateProvider.state('profile.about', {
  controllerAs: "About",
  url:          "^/about",
  templateUrl:  "about.html",
  controller:   "AboutController2"
});
$stateProvider.state('profile.feed', {
  controllerAs: "Feed",
  url:          "^/feed",
  templateUrl:  "feed.html",
  controller:   "AboutController2"
});
// user route
$stateProvider.state('profile.user' , {
  controllerAs: "Profile",
  url:          "^/:username",
  controller:   "ProfileController",
  template:     "<div ui-view></div>",
  resolve: {
    username: ['$stateParams', function ($stateParams) {
      return $stateParams.username;
    }]
  }
});
// user about route
$stateProvider.state('profile.user.about', {
  controllerAs: "About",
  url:          "/about",
  templateUrl:  "about.html",
  controller:   "AboutController"
});
// user about route
$stateProvider.state('profile.user.feed', {
  controllerAs: "Feed",
  url:          "/feed",
  templateUrl:  "feed.html",
  controller:   "AboutController"
});

Hope this help someone else to not waste time on such a simple error.