How to properly integrate the aurelia-i18n plugin in a TypeScript with Webpack scenario?

First of all, I’m new to Aurelia, so please forgive me if this is somewhat of a noob issue.

I set up an Aurelia project with TypeScript and Webpack using aurelia-cli v2.0.2 and tried to follow the official docs on aurelia.io. I want to use the Aurelia loader to provide i18n with translation.json files. However, I wasn’t able to correctly configure i18next, it always says that the corresponding JSON files could not be loaded:

My main.ts file looks like this:

import { Aurelia } from 'aurelia-framework';
import * as environment from '../config/environment.json';
import { PLATFORM } from 'aurelia-pal';
import { Backend, TCustomAttribute } from 'aurelia-i18n';

export function configure(aurelia: Aurelia): void {
    aurelia.use
        .standardConfiguration()
        .developmentLogging(environment.debug ? 'debug' : 'warn')
        .plugin(PLATFORM.moduleName('aurelia-i18n'), instance => {
            const aliases = ['t', 'i18n'];
            TCustomAttribute.configureAliases(aliases);
            instance.i18next.use(Backend.with(aurelia.loader));

            return instance.setup({
                backend: {
                    loadPath: './locales/{{lng}}/{{ns}}.json'
                },
                attributes: aliases,
                lng: 'de',
                fallbackLng: 'en',
                debug: true
            });
        });

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

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

What I tried so far:

• I removed the dot in in the path. According to this Discourse request, Webpack cannot handle dots in paths, but loadPath: 'locales/{{lng}}/{{ns}}.json' does not fix the problem.
• I also tried to omit the Aurelia loader and apply the parsed JSON files directly to resources, but using import * as en from './locales/en/translation.json' didn’t work as well. I assume this has to do with the webpack configuration where the default json loader was removed a while ago? However, when I simply reintroduce it, compilation failed.

My next steps will be to re-add the JSON loader to Webpack for the translation files only. However, I think that the docs need to be updated so that the Aurelia loader can be used in a Webpack scenario.

[feO2x]

Sure - I will get to it in the upcoming days.

[Sayan751]

I am closing this issue, as it seems to be resolved. Please feel free to continue the discussion.