Angular UI Router - state query string parameter not working

Question

I have a very similar scenario to the angular-ui-router demo app: whenever the user tries to access a state that requires auth, there's a hook which redirects him to the login state. The additional requirement is that someone might want to access a state via URL with an additional querystring parameter: username which should be auto-populated in the login page's corresponding input.

My states structure is like so:

• there is a shell abstract state which is parent to all other states similar to the app state in the demo app
• this shell state has url: '?username' (if I understand correctly this parameter should then be inherited by all other states)
• my login component has a binding username: '<'
• the login state has a resolve like so username: $transition$ => $transition$.params().username

The whole login/redirect mechanism works perfectly. The only problem is that in the login's state resolve the params().username is undefined even if in the browser I go to a link like http://mysite/#/somestate?username=foo.

Any idea what I'm doing wrong or how I can achieve what I'm after?

Thanks!

Answer 1

I'm going to answer my own question: the problem was actually in the login redirect hook. There I was redirecting to the login state with state.target('login', params, {location: false}) and I was getting the params from transition.router.stateService.params which never had valid values.

Just trying stuff out I found that actually transition.params() gives me the correct parameter values, so I can now redirect with those params and it works fine.

I do have one issue still though: I would ideally like that after login I redirect back to the originally requested state and clear these params from the querystring. Anyone know if that is possible/supported?