i18N problems with it's implementation / configuration

Help Requests
1

Hello there,
I’m trying to add i18n translations and regarding the docs I have:

@inject(MenuRenderer, I18N)
export class MenuService {
  constructor(menuRenderer, i18n) {
    this.menuRenderer = menuRenderer;
    this.i18n = i18n;
    console.log(this.i18n.tr('score'));
    this.controller = new MenuController(menuRenderer);
  }

...
  }
}

my main.js contains:

....
.plugin(PLATFORM.moduleName('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 https://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 : 'bg',
        fallbackLng : 'en',
        ns: ['app'],
        defaultNS: 'app',
        debug : true
      });
    });....

in my ./src I have locales/bg/app.json, which is

{
  "score": "Score: {{score}}",
  "lives": "{{count}} life remaining",
  "lives_plural": "{{count}} lives remaining",
  "friend": "A friend",
  "friend_male": "A boyfriend",
  "friend_female": "A girlfriend"
}

and my question is:
Why the heck I have in the console

i18next::translator: missingKey bg app score score  from the i18-next.js:13
and score from the menu-service: line11

image
image1178×101 5.22 KB

2

Maybe let me be your rubber :duck::

  • does this happen to all keys, or only score?
  • does this happen to all langs, or only default lang?
  • does this happen only on startup or on going
  • does this happen to the default namespace or all namespaces?

After those questions, you can pause for a moment and then ask: “what the heck did I miss”?

3

Also check if the translation JSON is actually getting downloaded by the browser. If not, then there might be some issues with the backend loader. My typical choice for a backend loader is the i18next-fetch-backend.

1 Like
4 
[quote="bigopon, post:2, topic:5525, full:true"]
Maybe let me be your rubber 🦆:

- does this happen to all keys, or only `score`?
- does this happen to all langs, or only default lang?
- does this happen only on startup or on going
- does this happen to the default namespace or all namespaces?

After those questions, you can pause for a moment and then ask: "what the heck did I miss"?
[/quote]


 - yes 
 - yes 
 - not sure on the eongoind as the log is only in my constructor and if I have it there, that would be a good way point. 
 - yes
5

Actually this is good point and - no I think no. I followed up what browser loads and can’t see the json file with the translations. Although if switch to other non existing language like:
this.i18n.setLocate('de')
I have in the console ‘could not load locales/de/app.json’ from the i18next.

6

I think that in that case it is quite evidently an issue with the loader. You may even try to bundling the locales, by importing the json files directly in js/ts and supplying those directly to i18next, if caching or bundle size is not a concern. If that works, you can be sure that there is something funny going on with the i18next backend you are using, and you may try a different backend.

1 Like
7

I’ll try a different back end, and if that is not ok, I’ll use it directly in the JS files. Size is not an issue.

8

Blockquote[quote=“bigopon, post:2, topic:5525, full:true”]
Maybe let me be your rubber :duck::

  • does this happen to all keys, or only score?
  • does this happen to all langs, or only default lang?
  • does this happen only on startup or ongoing
  • does this happen to the default namespace or all namespaces?

After those questions, you can pause for a moment and then ask: “what the heck did I miss”?
[/quote]

I tried this with method one from the Aurelia docs, where the loader was supposed to load the translations. I changed it with the back-end example, and now it works.
Tahnks a lot @Sayan751 !

1 Like