Documentation for aurelia-i18n does not seem to work

1

It seems that the current documentation for the aurelia-i18n plugin no longer produces a working solution.

I am using the aurelia loader and the cli project type. I have followed the documentation but when my app loads I get an error - “failed loading locales/en/translation.json”. I know that the translation.json file can at least be seen by my app because I get a 200 response in the network log.

I have tried various configs but nothing seems to work. As of now, below is what my config looks like:

import {Backend, TCustomAttribute} from ‘aurelia-i18n’;

…

aurelia.use.plugin(‘aurelia-i18n’, (instance) => {
let aliases = [‘t’, ‘i18n’];
// add aliases for ‘t’ attribute
TCustomAttribute.configureAliases(aliases);

// register backend plugin
instance.i18next.use(Backend.with(aurelia.loader));

// adapt options to your needs (see http://i18next.com/docs/options/)
// make sure to return the promise of the setup method, in order to guarantee proper loading
return instance.setup({
  backend: {                                  // <-- configure backend settings
    loadPath: 'locales/{{lng}}/{{ns}}.json', // <-- XHR settings for where to get the files from
  },
  attributes: aliases,
  lng : 'en',
  fallbackLng : 'en',
  debug : false
});

});

I am sure I am simply missing something but I am not 100% sure because following the documentation doesn’t result in success either. Any ideas what I might be missing?

1 Like
2

Well, I got it to work. For anyone else having issues, here is what I did:

  1. Make sure you have the latest version of aurelia and aurelia cli installed.

  2. DO NOT USE THE AURELIA LOADER FOR BACKEND. It doesn’t work. You have to use i18next-xhr-backend.

  3. Do not install i18next directly. The current version doesn’t work with aurelia-i18n. Only install aurelia-i18n and i18next-xhr-backend.

  4. NO NEED FOR:

  {
    "name": "i18next",
    "path": "../node_modules/i18next/dist/umd",
    "main": "i18next"
  },
  {
    "name": "aurelia-i18n",
    "path": "../node_modules/aurelia-i18n/dist/amd",
    "main": "aurelia-i18n"
  },
  {
    "name": "i18next-xhr-backend",
    "path": "../node_modules/i18next-xhr-backend/dist/umd",
    "main": "i18nextXHRBackend"
  }
  1. The “locales” folder must be in the root. So if you put it in “src” you need to copy it to the root during the build process (or do it manually).
2 Likes
3

It worked when I downloaded the i18next-xhr-backend. Thanks. But when I switch to other language by setLocale it doesn’t affect to UI.

4

You can see a working example in my Open Source repo Aurelia-Slickgrid-Demos this might help you figure out the correct setup.

1 Like
5

Thanks, actually setLocal was working the problem was about me I used ${‘Test’ | t} instead of <div t="Test">. When I move t into an HTML tag, it started to work. But, I’ll definitely look at your repo to fix my other issues.