Route clashing issue in chrome after 0.2.16

[cdriscol]

I have a routing use case where I have nested/wizard states that must keep the same URL.

For example:

• a user is taken to a create wizard with URL /something/create
• navigating between steps should not change the URL
• navigating directly to step 1 should be possible

I was able to do this by defining the following states (Also, I'm very open to better solutions for this use case):

$stateProvider
          .state('something.create', {
            url: '/create',
            abstract: true,
            template: '<div ui-view></div>'
          }) 
          .state('something.create.1', {
            url: '',
            template: '...'
          })
         // ...
          .state('something.create.4', {
            url: '',
            template: '...'
          });

This pattern has worked in versions 0.2.15 and lower.. but #1585 added a Array.prototype.sort to the route rules. The sort algorithm implemented in Chrome is not stable (https://bugs.chromium.org/p/v8/issues/detail?id=90).. so if you have a lot of routes defined in your application, then routes with the same prefix end up getting put into a somewhat random order.

I have added a link to 2 code pens which show this issue. You can view them in debug mode to see the URLs. You can notice the issue when you click the hij.step.1 button after loading the pen.. it will take you to step 3 in Chrome. Also, in debug mode if you add #/hij to the URL, it will take you to step 3 by default in Chrome.

v0.2.16: http://codepen.io/cdriscol/pen/adGBoX
v0.2.15: http://codepen.io/cdriscol/pen/bEKoXL

I think sorting rules by prefix length to avoid clashes is appropriate, but I think we should ensure a stable sort so that the first rule that matches is the first rule that is defined in the application.

[cdriscol]

This also looks related to #2496

[artworkad]

👍 just experience the same

[christopherthielen]

See our discussion in PR #2502