Aurelia 2 i18n webpack translation.json not found

Help Requests
1

Started a new au2 project with webpack: npx makes aurelia and selected option: Default TypeScript Aurelia 2 App

Got started with setting up i18n from the docs: Internationalization (i18n)
After installing the plugin and registering the first example, it seems to work just fine:

options.initOptions = {
  resources: {
    en: { translation: { key: "Hello I18N"} },
    de: { translation: { key: "Hallo I18N"} },
  }
};

I’m interested in getting the i18next Backend plugin method working to asynchronously load the resource file when needed. I followed the instructions in the docs and installed i18next-fetch-backend plugin and using the default settings:

options.initOptions = {
  plugins: [Fetch],
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    }
};

After that setup and running the app with npm start the translation <span t="key"></span> is not working anymore because the translation.json file I created gets a 404 somehow. I also noticed that the favicon.ico file that came with the aurelia template is getting a 404:

404
404997×360 51.1 KB

Maybe these 404’s are somehow connected that webpack is not able to serve these static files? Has anybody got an idea?

2

Make sure that you have configured webpack to copy the locale files to the output directory. If your build process is solely dependent on webpack, then you can use the CopyWebpackPlugin to this end.
If you are using a task runner like gulp you can leverage that as well to copy the locale files to the output directory.

1 Like
3

Thank you for the guidance! :clap: I totally missed the section in the docs that mentions that same thing :face_with_head_bandage:

I learned that when using webpack 5.65 and webpack-dev-server 4.5 there has been a change of propery in webpack-dev-server - contentBase has been renamed to static - link to github comment

So instead of this setting in the docs:

devServer: {
  contentBase: path.join(__dirname, "dist"),
}

I changed it like that and got rid of the webpack error:

devServer: {
  static: path.join(__dirname, "dist"),
}
3 Likes