Internationalization


#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, https://github.com/jamesarosen/ember-i18n/wiki/Doc:-Translating-Text

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

and then https://github.com/jamesarosen/ember-i18n/wiki/Doc:-Translating-Text

{{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 https://emberjs.com/api/ember/2.15/classes/Ember.Route/methods/afterModel?anchor=afterModel

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.