ngx-translate: use different directories for translation files

Question

I'm using ngx-translate to translate buttons, headers, ... in my app and this works fine. My translation files are in the /assets/i18n/ folder.

Now I have mockdata which I also have to translate, but my mockdata is in another directory -> /assets/data/

To load my json translations files from the i18n folder I use:

export function setTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

but now I also want to load the files from the data directory.

How can I achieve that?

Answer 1

You should be able to use ngx-translate-multi-http-loader which let you use multiple translation file.

My stackblitz example

Or

1. run npm i ngx-translate-multi-http-loader
2. in your app.module.ts file add

import { MultiTranslateHttpLoader } from 'ngx-translate-multi-http-loader'

export function HttpLoaderFactory(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: 'assets/i18n/', suffix: '.json' },
    { prefix: 'assets/data/', suffix: '.json' },
  ])
}

// ...

@NgModule({
  imports: [
   TranslateModule.forRoot({
     loader: {
       provide: TranslateLoader,
       useFactory: HttpLoaderFactory,
       deps: [HttpClient],
     },
   }),
  ]

EDIT

If you get an Something went wrong for the following translation file, -> here you have a way to fix it