[SOLVED] How to use i18N with backend in au-cli webpack projects?

Help Requests
1

How can I load translation files into my project?
There seams to be an issue with Backend and this.i18n.tr is undefined

Create the project:

au-cli new i18NTest
3 Custom
3 Webpack
1 Web
1 Babel
: N/A

Install dependencies:

yarn add aurelia-i18n
yarn add i18next-xhr-backend

Create the translation files:
src/locations/en/transtation.json:
{
“msg” : “Hello world!”
}

src/locations/no/translation.json:
{
“msg”:“Hallo verden!”
}

main.js:

import environment from './environment';
import {PLATFORM} from 'aurelia-pal';
import 'babel-polyfill';
import * as Bluebird from 'bluebird';
import {I18N, TCustomAttribute} from 'aurelia-i18n';
import Backend from 'i18next-xhr-backend';

// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: { wForgottenReturn: false } });

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('resources/index'));

  // Uncomment the line below to enable animation.
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css'));
  // if the css animator is enabled, add swap-order="after" to all router-view elements

  // Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
  // aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader'));

  if (environment.debug) {
    aurelia.use.developmentLogging();
  }

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.use.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);   **//  Backend is not defined**

    // 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 : 'no',
      fallbackLng : 'en',
      debug : false
    });
  });


  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

app.js:

import {I18N} from 'aurelia-i18n';
import {inject} from 'aurelia-framework';

@inject(I18N)
export class App {
  constructor(i18N){
    this.i18N = i18N;
    
    console.log(this.i18n.tr('msg'));  **//tr is undefined**
    
  }

}

According to:
Failed to load translation with aurelia backend and latest webpack 2.6.1 #221

  • Webpack is not a loader
  • JSON files can be added as chunks

in webpack.config.js

plugins:[
      :
       new ModuleDependenciesPlugin({
           'aurelia-testing': [ './compile-spy', './view-spy' ],
           "aurelia-i18n": [ 
             { name: "locales/en/translation.json", chunk: "lang-en" },
             { name: "locales/no/translation.json", chunk: "lang-no" }
           ]
         }),
      :
    ]
2

You are using the Backend Loader provided by the plugin but you installed the xhr-i18next-plugin. So you should import the backend from there and wire it. Take a look at the plugin docs. The provided backend from aurelia really depends on the loader capability as such its not the right fit for Webpack.

4

Actually, I got the main.js wrong the first time I’ve corrected it.
I’m still having the same issue that backend is not defined.

5

Have you checked the import? I’m not sure how this is bundled with webpack, so try import * as Backend and console.log it to see whats returned.

6

I did not receive much
import * as Backend from ‘i18next-xhr-backend’;

console printout console.log(Backend):
ƒ Backend(services) {
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

_classCallCheck(this, Backend);

this.init(services, options);

this.type = …
7

Yesterday I had another go at using i18N plugin:
(I revisited the thead Failed to load translation with aurelia backend and latest webpack 2.6.1 #221, and noticed it has bean updated with some useful tips )

I got the plugin working by importing the Backend from aurelia-i18n, since I have no reason to use i18next-xhr-backend in the first place.

For the record:
Create the project
same as before

Install dependencies
yarn add aurelia-i18n

Create the translation files
src/locations folder must be renamed to src/locales, to be aligned with the code

main.js :
////CHANGES FROM PREVIOUS main.js uses 4 slashes like so ////
import environment from ‘./environment’;
import {PLATFORM} from ‘aurelia-pal’;
import ‘babel-polyfill’;
import * as Bluebird from ‘bluebird’;

////IMPORTING Backend FROM aurelia-i18n
import {Backend, TCustomAttribute} from 'aurelia-i18n'; 
////REMOVED import Backend from 'i18next-xhr-backend'; 

// remove out if you don't want a Promise polyfill (remove also from webpack.config.js)
Bluebird.config({ warnings: { wForgottenReturn: false } });

export function configure(aurelia) {

aurelia.use
  .standardConfiguration()
  .feature(PLATFORM.moduleName('resources/index'));

// Uncomment the line below to enable animation.
// aurelia.use.plugin(PLATFORM.moduleName('aurelia-animator-css'));
// if the css animator is enabled, add swap-order="after" to all router-view elements

// Anyone wanting to use HTMLImports to load views, will need to install the following plugin.
// aurelia.use.plugin(PLATFORM.moduleName('aurelia-html-import-template-loader'));

if (environment.debug) {
  aurelia.use.developmentLogging();
}

if (environment.testing) {
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
}

aurelia.use.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
  let aliases = ['t', 'i18n'];

  // add aliases for 't' attribute
  TCustomAttribute.configureAliases(aliases);

  // register backend plugin
 //// BACKEND IS CHANGED
 //// old line: instance.i18next.use(Backend);
  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

       ////**JSON LOADER DOES NOT SUPPORT './' IN PATH **
      //// old line: loadPath: './locales/{{lng}}/{{ns}}.json', //<-- XHR settings for where to get the files from
      loadPath: 'locales/{{lng}}/{{ns}}.json', //<-- XHR settings for where to get the files from
    },
    attributes: aliases,
    lng : 'no',
    fallbackLng : 'en',
    debug : true
  });
  });

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

app.js
fix typo line 9 this.i18n.tr must be this.i18N.tr

webpack.config.js
no changes

1 Like