Angular ui-router Url localized

Question

I'd like to have localization in URL like this:

http://example.com/de -> get German locale (DE)

http://example.com/it -> get Italian locale (IT)

So I did an abstract route like this:

state('root', {
  abstract: true,
  url: '/{lang:(?:de|it)}',
});

And the home one like this:

state('root.home', {
  url: '',
});

And it works fine, but now the default root http://example.com/ is not working anymore. I need to have url: '/' working like the other ones

Answer 1

Do it manually then, but it looks hacky way.

.state('root', {
  abstract: true,
  url: '/{lang:(?:de|it)}',
  params: {
     lang: null
  },
  controller: function($stateParams, $state){
    if(!$stateParams.lang){
      $state.go('.home')
    }
  }
});