Translating using multiple JSON for each language with ngx-translate

Question

I'm working on a project in Angular that needs to be translated for two languages: pt-br (my main language) and english. I managed to translate it with ngx-translate, but ngx uses a single file for each language, while in other applications related to this project we use the JHipster pattern (a directory for each language, with different JSON for each component).

What I want to do is use that same pattern for the translation of files in this particular project, but I've been met with limited luck so far. I tried both Boris solution and the ngx-translate-multi-http-loader , but they did not work for me.

Basically, while the multi-loader allows me something like this:

assets/i18n/core/en.json

What I want to do is something like this:

assets/i18n/en/core.json

Can anyone help me on how to achieve that?

Answer 1

try this, just a guess return new TranslateHttpLoader(http, "assets/i18n/", "/core.json");

Answer 2

I think other interesting approach would be using a webpack plugin which merge all your json files into only one json file in order to be read properly by the plugin an example (Based in Jhipster approach):

plugins: [
    //...other plugins
    new MergeJsonWebpackPlugin({
        output: {
            groupBy: [
                { pattern: "./src/main/webapp/i18n/es/*.json", fileName: "./i18n/es.json" },
                { pattern: "./src/main/webapp/i18n/en/*.json", fileName: "./i18n/en.json" }
                // jhipster-needle-i18n-language-webpack - JHipster will add/remove languages in this array
            ]
        }
    })
]