How to add languages after i18next init in Angular?

[aubrey-fowler]

0 down vote favorite I want to use the i18next library to handle my localisations in my Angular 1.5.3 + Ionic project.

In my situation, the translations are per-user and will be provided after the user logs in.

I want to initialize i18next in the app.js file and then add translations in my register controller. It’s not working out for me.

App.js

if (window.i18next) {
    console.log('i18next'); //prints out i18next

    window.i18next.init({
        debug: true,
        lng: 'English', // If not given, i18n will detect the browser language.
        fallbackLng: 'English', // Default is dev
        useCookie: false,
        useLocalStorage: false
    }, function (err, t) {
        console.log('resources loaded'); //prints out resources loaded
    });
}

(function () {

    'use strict';

    angular.module(myApp, [
        'ionic',
        'ngCordova',
        'jm.i18next',
        'ngSanitize'
    ])
})();

Register.controller.js

(function () {
    "use strict";

    angular
        .module(myApp)
        .controller('RegisterController', function ($i18next, $scope) {

            console.log('> > > > > register controller::: ', $i18next);
//prints out: I18nTranslateService {$rootScope: m, options: Object, tOptions: Object, modules: Array(0), translations: Object…}

            $i18next.i18n.addResouceBundle('English', 'translations', {
              HELLO: 'hiya'
            });

//Object {exception: "TypeError: $i18next.i18n.addResouceBundle is not a function", stack: "TypeError: $i18next.i18n.addResouceBundle is not a…t:4400/lib/ionic/js/ionic.bundle.min.js:472:11277", cause: null}

})();

In addition to this, I have also tried to do window.i18next.addResourceBundle as well as $i18next.addResourceBundle and say that it is not a function. In the documentation it says that you can add items after init: https://www.i18next.com/add-or-load-translations.html

I am not sure what I am doing wrong.

[jamuhl]

what i see is lng: 'English' should be lng: 'en' (same for fallbackLng), and when addingResourceBundle

[aubrey-fowler]

I changed it to 'en' and it still doesn't work. It says: Object {exception: "TypeError: $i18next.i18n.addResouce is not a function", stack: "TypeError: $i18next.i18n.addResouce is not a funct…t:4400/lib/ionic/js/ionic.bundle.min.js:472:11277", cause: null}

[jamuhl]

$i18next.i18n.addResouceBundle -> $i18next.addResouceBundle ?!?

[aubrey-fowler]

I tried that too and it doesn't work. Same type of error. t {exception: "TypeError: $i18next.addResouceBundle is not a function", stack: "TypeError: $i18next.addResouceBundle is not a func…t:4400/lib/ionic/js/ionic.bundle.min.js:472:11277", cause: null}

[jamuhl]

does your controller code get called before i18next.init - if so there is the problem

[aubrey-fowler]

Nope. It's after.

[jamuhl]

in that case window.i18next.addResourceBundle is defined for sure.

[aubrey-fowler]

Ionic Core: init ionic.io.bundle.min.js:2 Ionic Core: searching for cordova.js ionic.io.bundle.min.js:2 Ionic Core: injecting cordova.js app.js:4 > > > > > > i18next i18next.js:167 i18next::backendConnector: No backend was added via i18next.use. Will not load resources. output @ i18next.js:167 warn @ i18next.js:158 forward @ i18next.js:227 warn @ i18next.js:205 load @ i18next.js:1571 (anonymous) @ i18next.js:2011 load @ i18next.js:1707 (anonymous) @ i18next.js:2010 loadResources @ i18next.js:2013 setLng @ i18next.js:2079 changeLanguage @ i18next.js:2089 load @ i18next.js:1952 i18next.js:167 i18next: languageChanged en i18next.js:167 i18next: initialized Object {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: Array(1)…} app.js:13 > > > > > resources loaded app-host-webkit-handlers.js:22 Persistent fs quota granted register.controller.js:9 > > > > > register controller::: I18nTranslateService {$rootScope: m, options: Object, tOptions: Object, modules: Array(0), translations: Object…} I18n {observers: Object, options: Object, services: Object, logger: Logger, modules: Object…} I18n {observers: Object, options: Object, services: Object, logger: Logger, modules: Object…} app.js:383 Object {exception: "TypeError: window.i18next.addResouceBundle is not a function", stack: "TypeError: window.i18next.addResouceBundle is not …t:4400/lib/ionic/js/ionic.bundle.min.js:472:11277", cause: null} (anonymous) @ app.js:383 $broadcast @ ionic.bundle.min.js:179 x.transition.I.then.x.transition.x.transition @ ionic.bundle.min.js:447 (anonymous) @ ionic.bundle.min.js:162 $eval @ ionic.bundle.min.js:176 $digest @ ionic.bundle.min.js:174 $apply @ ionic.bundle.min.js:177 g @ ionic.bundle.min.js:129 x @ ionic.bundle.min.js:134 v.onload @ ionic.bundle.min.js:135 ionic.io.bundle.min.js:2 Ionic Core: plugins are ready

[jamuhl]

window.i18next.addResouceBundle typo addResourceBundle

[aubrey-fowler]

I fixed the typo and now I have a different error:

i18next i18next.js:167 i18next::backendConnector: No backend was added via i18next.use. Will not load resources. output @ i18next.js:167 warn @ i18next.js:158 forward @ i18next.js:227 warn @ i18next.js:205 load @ i18next.js:1571 (anonymous) @ i18next.js:2011 load @ i18next.js:1707 (anonymous) @ i18next.js:2010 loadResources @ i18next.js:2013 setLng @ i18next.js:2079 changeLanguage @ i18next.js:2089 load @ i18next.js:1952 i18next.js:167 i18next: languageChanged en i18next.js:167 i18next: initialized Object {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: Array(1)…} app.js:13 > > > > > resources loaded i18next.js:167 i18next::translator: missingKey en translation HELLO HELLO home.controller.js:34 HELLO ionic.io.bundle.min.js:2 Ionic Push: register app-host-webkit-handlers.js:22 Persistent fs quota granted ionic.io.bundle.min.js:2 Ionic Core: plugins are ready

[aubrey-fowler]

        $i18next.i18n.addResourceBundle('en', 'translations', {
          HELLO: 'hiya'
        });

[jamuhl]

is window.i18next.addResourceBundle defined?

[aubrey-fowler]

Yes it is.

i18next i18next.js:167 i18next::backendConnector: No backend was added via i18next.use. Will not load i18next.js:167 i18next: languageChanged en i18next.js:167 i18next: initialized Object {debug: true, initImmediate: true, ns: Array(1), defaultNS: Array(1), fallbackLng: Array(1)…} app.js:13 > > > > > resources loaded app-host-webkit-handlers.js:22 Persistent fs quota granted register.controller.js:9 > > > > > register controller::: I18nTranslateService {$rootScope: m, options: Object, tOptions: Object, modules: Array(0), translations: Object…} I18n {observers: Object, options: Object, services: Object, logger: Logger, modules: Object…} I18n {observers: Object, options: Object, services: Object, logger: Logger, modules: Object…} register.controller.js:16 function () { var _store;

    return (_store = _this2.store)[fcName].apply(_store, arguments);
  }

register.controller.js:18 hiya ionic.io.bundle.min.js:2 Ionic Core: plugins are read

I think it worked out this time. It printed out 'hiya'. Thanks for your help!!!

[aubrey-fowler]

Is there a way to get rid of this warning? i18next::backendConnector: No backend was added via i18next.use. Will not load resources.

[jamuhl]

init with resources: {}

i18next.init({
  ...,
  resources: {}
});

[aubrey-fowler]

Thanks for your help it's working great now.