How can I switch languages dynamically with angular-translate and angular-ui-router?

Question

My application is using angular-translate, angular-ui-router and templates. The application html pages with the exception of the index.html are packed into templates and served from Amazon CloudFront backed by S3. What I would like to do is to find a way to switch the language dynamically depending on a two letter code after the domain name and also if possible pick up on the user locale and use that for default switching.

The reason I would like to do this is for SEO purposes as I have read that Google recommends putting in a country code into the address as below.

Here's what I have so far:

The router file

    var home = {
        name: 'home',
        url: '/home/'
    };

    var homeAccess = {
        name: 'home.access',
        url: 'access',
        views: {
            'home@': {
                templateProvider: ['$templateCache', ($templateCache) => {
                    return $templateCache.get('webapi.html');
                }],
            }
        }
    };

Somehow I would like to make it so that when a search engine chooses:

www.example.com/de/home/webapi  or
www.example.com/en/home/webapi  or
www.example.com/fr/home/webapi

That angular router switches to the appropriate language file before serving the webapi.html file.

Any suggestions on how I could do this would be much appreciated. Ideally I'd like to see a simple example with a language file switcher that would help me and also others in the community to do what's needed.

Please note there's another similar question out there:

Localize URL's with ui-router and angular-translate

The answers there are good but I'm also hoping that by opening up this question I can get an even better and more updated answer, perhaps with some internationalization SEO tips thrown in. I just think this is such an important thing that the more answers to help people on this forum the better.

What about the base tag ? If you make it switch to the appropriate language it should work ? Or make it point to the root of your domain name and use return $templateCache.get(myLocale+'/home/webapi.html'); — Walfrat, Apr 18 '16 at 08:40
I would say that question you're referencing has a well explained answers (http://stackoverflow.com/questions/24281652/localize-urls-with-ui-router-and-angular-translate?rq=1). You may figure out some more, but you should know that Angular 1.x from SEO point of view still will not provide sufficient results without extra actions. Such as pre-rendering if you want to achieve full SEO effect. One of the services that you may make use of: https://prerender.io/ — shershen, Apr 16 '16 at 14:12

score 10 · Accepted Answer · edited May 23 '17 at 10:29

You need to create common abstract ui-router state and setup your language settings there:

$stateProvider.state('common', {
  abstract: true,
  url: '/{lang:(?:es|en)}'
});

and after your home state would be child from common:

$stateProvider.state('common.home', {
  url: '/home',
  templateUrl: 'views/home.html',
});

now you can setup language switch on state change event:

app.run(($rootScope) => {
  $rootScope.$on('$stateChangeSuccess', (event, toState, toParams) => {
    if(toParams.lang && $translate.use() !== toParams.lang){
      $translate.use(toParams.lang);
    }
  });
});

[19.04.2016] I declare that Google is still not able to parse your web application in clever way. Related question - SEO: How does Google index Angular applications 2016

So I as well as @shershen I recommend to use prerender.io service for better SEO.

How can I switch languages dynamically with angular-translate and angular-ui-router?

1 Answers1