Internationalization

Ember CLI
1

Are there any tutorials, examples on how to implement internationalization in an Ember app? I found the only more or less updated add-on: ember-i18n but it lacks of examples and some of existing ones are outdated. Googling didn’t give anything else. Any other ways or plugins/add-ons with real examples ? Thank you.

2

hey, I have used ember-i18n in one of my projects, as far as i remember I found everything in the docs.

What kind of issue you have ? That addon works pretty well.

3

I cant’ figure out how to pass in a variable to a translation from a template ? In Rails, we define a translation like that in a YAML file:

failure: "Could not authenticate you from %{kind} because of %{reason}."

And we pass in the corresponding values like that from a view:

t('.failure', kind: some_variable, reason: another_value).

I wonder how to achieve the same in Ember ?

Another question: what exactly should I define and where to make it work (initializer, application route, etc.) ? How to configure the service and should I do that ? The way described in wi-ki is not clear enough…

Thank you.

4

looks almost the same, Doc: Translating Text · jamesarosen/ember-i18n Wiki · GitHub

"welcome": "Welcome to {{appname}}",

and then Doc: Translating Text · jamesarosen/ember-i18n Wiki · GitHub

{{t "welcome" appname="belgoros"}}

should yield

welcome belgoros

5

@CezaryH Ah, thanks a lot, it works now (just for one locale for the moment. What about how to set/enable locales ? I tried to follow the doc but failed… I tried just create application router: ember g route application and added the following (as described in the Wi-Ki):

i18n: Ember.inject.service(),
  afterModel: function(user) {
    this.set('i18n.locale', user.get('locale'));
  }

In this case, the application router looks like that:

#app/routes/application.js
import Route from '@ember/routing/route';

export default Route.extend({
  i18n: Ember.inject.service(),
  afterModel: function(user) {
    this.set('i18n.locale', user.get('locale'));
  }
});

The error I have in the browser console:

ember-metal.js:3987 TypeError: Cannot read property 'get' of undefined
    at Class.afterModel (application.js:10)
    at applyHook (router.js:244)
    at C.runSharedModelHook (router.js:840)
    at C.runAfterModelHook (router.js:824)
    at router.js:97
    at tryCatcher (rsvp.js:215)
    at invokeCallback (rsvp.js:393)
    at publish (rsvp.js:379)
    at rsvp.js:14
    at invoke (backburner.js:274)

Any guides lines for that ? Thank you.

6

so, you get error because user variable is undefined, you can see in ember docs that afterModel receive model as argument

you don’t have model hook, that’s why it’s not working.

But more important is how you’d like to handle locale, where you’ll store it, in url ? in variable, or something else.

to make your example working, just change

    this.set('i18n.locale', user.get('locale'));

to

    this.set('i18n.locale', 'en-en');
7

I figure out how to get it working:

  1. Generate an instance initializer named i18n: ember generate instance-initializer i18
  2. Modify if as follows:
export function initialize(applicationInstance) {
  let i18n = applicationInstance.lookup('service:i18n');
  i18n.set('locale', calculateLocale(i18n.get('locales')));
}

function calculateLocale(locales) {
  // whatever you do to pick a locale for the user:
  const language = navigator.languages[0] || navigator.language || navigator.userLanguage;

  return  locales.includes(language.toLowerCase()) ? language : 'en-GB';
}

export default {
  name: 'i18n',
  initialize
};
  1. Declare the default locale in config/environment.js, for example, just before if (environment === 'development') { block:
// setting the default locale
  ENV.i18n = {
    defaultLocale: 'en'
  };
  1. Generate the locales you need ember generate locale your_locale and add some translations: for example, in my locales/fr/translations.js:
export default {
  "hello.user": "Bonjour, {{user}}"
};
  1. Use translations in your template, for example, in templates/application.hbs:
<h3>{{t "hello.user" user="belgoros"}}</h3>

Now if change the locale used by your browser, you can check if it works for you. If there are some errors, I’d be happy to know that. Thank you.