Core: An issue with loading JSON (language resource) files when the angular-cli build is used

[manumqln]

I found an issue with loading JSON (language resource) files when the angular-cli build is used and the whole application is put under a subfolder and base href is changed. Currently, 404 Not Founderror is displayed since the library tries to access the file from (<domain>/assets/i18n/en.json) instead of the (<domain>/subfolder/assets/i18n/en.json) even though the base href is updated accordingly. The application works fine if I put it in the root folder.

In my opinion, the library should try to prepend the base href in all cases. Just a suggestion. Looking forward to resolving it.

Thanks in advance.

[SamVerschueren]

@ocombe Would we be able to inject APP_BASE_HREF somewhere in order to prefix the path with that value?

[julianpoemp]

i got this issue, too. How can this be fixed?

[raemounz]

May I know how you were able to make it work? For my case, I followed the documentation however nothing happens, no error at all.

[julianpoemp]

in app.module.ts make sure that you use this HttpLoaderFactory function:
export function HttpLoaderFactory(http: Http) { return new TranslateHttpLoader(http, "./assets/i18n/", ".json"); }
that fixed this issue for me.

[raemounz]

i have the following inside my AppModule

export function HttpLoaderFactory(http: Http) {
  return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}
  imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [Http]
      }
    })
  ],

inside app.component.ts, I have the following:

 constructor(translate: TranslateService) {
    translate.setDefaultLang('en-US');
    translate.use('en-US');
  }

and i have the file src/assets/i18n/en-US.json

is there anything I did wrong?

[julianpoemp]

I'm not sure, but did you try just "en" instead of "en-US"?

[raemounz]

I also tried just "en" for both the config and the filename, but still nothing happens. The MockBackend seems to be the culprit as when I removed it, the translation works. But I need the MockBackend, any suggestion?

[julianpoemp]

what's the output of your web console? Are you sure that you have followed the instructions exactly and the file exists in path "src/assets/i18n/en.json"?
Do you use the translate pipe properly? For example (assuming your en.json contains this):
{ "continue": "Continue", "generals": {"test":"Test"} }
you have to insert this in your template:
````

{{"continue" | translate}}

or

{{"generals.test" | translate}}

````
I don't know MockBackend, sorry.

[angryanatole]

I have the same issue here. I'm not sure why, but it searches files from my domain, not the app folder.
I'm using it with Angular CLI, if it matters.

[lchimaru]

I had the same issue, but changing "assets": [ "assets", "favicon.ico" ], to "assets": [ "assets/", "favicon.ico" ], helped me solved it.

[juliengloria]

Did you solved it ?

[ocombe]

Hello, I'm closing this issue because it's too old.
If you have a similar problem with recent version of the library, please open a new issue.

If you need an example with the CLI, see https://github.com/ngx-translate/example

[cikcoh]

HI, i have question, sometimes the server is down and json file failed to fetch. so i have a tryagain() function in components tryin to load whatever needed api again including fetching json file again in that function too. how do i call this function in componets? can anyone help me?
export function HttpLoaderFactory(http: Http) {
return new TranslateHttpLoader(http, "./assets/i18n/", ".json");
}

[Justicea83]

// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin(
[
{ from: { glob: "assets/" } },
{ from: { glob: "fonts/" } },
{ from: { glob: "i18n/.json" } },
{ from: { glob: "/.jpg" } },
{ from: { glob: "/*.png" } },
],
{ ignore: [${relative(appPath, appResourcesFullPath)}/**] },
),

This { from: { glob: "i18n/*.json" } }, makes sure all the i18n JSON files are copied to bundle.

[udhayaganesh85]

try this 2 option..it worked for me

export const environment = {
production: true,
appRootPrefix: '/<>'
};

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