i18next always returning missing key

Question

Every time I try to translate I get i18next::translator: missingKey es-AR This is my pug component.pug

 .headersGroup
              h2(ng-i18next="{{$ctrl.getFilterTitle()}}")
              h3(ng-i18next="landing.name")

I tried to translate in two ways. From the pug file and from the controller.

component.js

getFilterTitle () {
      return this.$i18next.t('landing.title')
    }

I not even interpolating or anything. Just a basic translation.

es-AR.json

{
  "landing": {
   "title" : "Filtros",
   "name" : "Principales"
  }
}

This is my init

    window.i18next
              .use(window.i18nextXHRBackend);
            window.i18next.use(window.i18nextLocalStorageCache);

            window.i18next.init({
              debug: '!{env}' !== 'production',
              lng: config.locale, // If not given, i18n will detect the browser language.
              fallbackLng: false,
              backend: {
                loadPath: '/

myApp/build/i18n/{{lng}}/{{ns}}.json'
          },
          cache: {
            enabled: true,
            prefix: 'i18next_experts_',
            expirationTime: 7 * 24 * 60 * 60 * 1000,
            versions: {}
          },
          useCookie: false,
          useLocalStorage: false
        }, function (err, t) {
          console.log(err, t);
        });

jamuhl jamuhl · Accepted Answer · 2017-12-20T10:36:21

Rather sure you render (call t function) before i18next loaded the translations.

Check the console output...do you get those missing log entries before there is the backend loaded message?

i18next always returning missing key

1 Answers