'/' Is Not Letting The State To Pass To '/{username:[a-za-z0-9]{3,20}}' In Angularjs Ui-router

I have a abstract root state called 'site' with empty url i.e. '' , which has two child state 'profile' and 'home' where the url for home is '/' and the url for profile is '/{usern

Solution 1:

There is a working example, where I mostly switched the order of state declaration:

.state('site.profile',{
        url:'/{username:[a-z0-9A-Z]{3,20}}',
        ...
    })
.state('site.home', {
        url: '/',
        ...
    })

The reason is that ui-router url engine does iterate states in order they were declared, and tries to find a url match. this way, we will get the working definition.

But I would suggest:

use some keyword to distinguish url, e.g. url:'/profile/{username:[a-z0-9A-Z]{3,20}}',

Not only this will help the engine to find the proper state by url, but even from perspective of the user/reader of the url - this seems to me more explicit, self-descriptive.

Anyhow, switching state def should solve the issue here...