CODEWITHSUNDEEP
aurelia
Jason Dar
Jason Dar

Reputation: 51

Cannot add locales files from aurelia-i18n to dist folder for production

I have been using aurelia Framework and the aurelia-i18n plugin for my translations. Everything works fine in local dev but when I build my app (npm run build) the locales folders are not included.

Here is my main.js plugin setup:

.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance) => {
  let aliases = ['t', 'i18n'];
  TCustomAttribute.configureAliases(aliases);
  instance.i18next.use(Backend); 
  return instance.setup({
    fallbackLng: 'en', 
    whitelist: ['en', 'es'],
    preload: ['en', 'es'], 
    ns: 'translation',
    attributes: aliases, 
    lng: 'en', 
    debug: true, 
    backend: {                                  
      loadPath: 'src/locales/{{lng}}/{{ns}}.json',  
    }
  });
})

In webpack module rules I have this:

{
  test: /\.json$/,
  loader: 'json', // I have also tried json-loader
  include: ['/locales/en', '/locales/es'],
},

Now, if I include the lang file in the webpack module dependencies the files do appear in the dist folder but are not accessible by the aurelia-i18n plugin as it is looking in the locales folder to find the files.

new ModuleDependenciesPlugin(
  {
    "aurelia-i18n": [ 
      { name: "locales/en/translation.json", chunk: "lang-en" },
      { name: "locales/es/translation.json", chunk: "lang-es" }
    ]
  })

Any ideas? Thank you in advance!

Upvotes: 0

Views: 781

Answers (1)

Zoltán
Zoltán

Reputation: 144

For production build we just copy the locales folder to dist. This is how the webpack.config.js looks like

new CopyWebpackPlugin([
    {
      from: path.join(staticDir, 'locales'),
      to: path.join(outDir, 'locales')
    }
  ])

In the root of the project we have a folder called static that contains the locales folder with the translations. And this is the function we use in main.js to configure i18n.

export function configureI18N(aurelia: Aurelia): void {

  aurelia.use.plugin(PLATFORM.moduleName('aurelia-i18n'), (instance?: any) => {
    // register backend plugin
    instance.i18next.use(Backend);
    const aliases = ['localization-key', 't', 'i18n'];
    // add aliases for 't' attribute
    TCustomAttribute.configureAliases(aliases);
    TParamsCustomAttribute.configureAliases(['localization-key-value-params']);
    // 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
      },
      lng: 'en',
      attributes: aliases,
      fallbackLng: 'en',
      lowerCaseLng: true
    });
  });

}

Upvotes: 1

Related Questions