Error: Http failure during parsing for i18n/.en.json file

[danielapereira11]

We are using ngx-translate with Angular V.13 and everything seems to be working well, the translations come through, but we sometimes are faced with the following error message: "Http failure during parsing for https://example.com/i18n/en.json". This error is not consistent and not easily reproducible.

For context, we import the TranslateModule through:

TranslateModule.forChild({ 
    loader: { 
        provide: TranslateLoader, 
        useFactory: TranslateLoaderFactory.create, 
        deps: [HttpClient] 
   } 
}), 

and this is our factory:

export abstract class TranslateLoaderFactory { 
    static create(httpClient: HttpClient) { 
        const { host } = window.location; 
        return new TranslateHttpLoader(httpClient, `//${host}${AssetsConstants.translations.path}`, AssetsConstants.translations.extension); 
    } 
} 

There was a very similar issue here > https://github.com/ngx-translate/http-loader/issues/37 < but never seemed to get a response, and is using a much older Angular version.

Any suggestion on how we can handle this?

[CodeAndWeb]

It's most likely an issue with your json file. Can you post it?

[danielapereira11]

It's most likely an issue with your json file. Can you post it?

@CodeAndWeb It's a pretty big file with almost 4000 lines of translations :/ Also, we've checked the .json file many times and everything looks fine (no trailing commas, no single quotes where there should be double, correctly inserted colons and brackets...). What should we be on the lookout for? And keep in mind that the translations come through correctly. If it were an issue with the .json file wouldn't this behaviour be consistent?

[CodeAndWeb]

Ok. There are tools out there to check your json file - if it does not contain sensitive data you can for example paste it here: https://jsonlint.com

Another option is that the file that is received is not json. E.g. the file does not exist and instead of the json a html page with the error message is received.

I am a bit confused by the error message your are receiving. Its it really example.com? I had assumed that you replaced the domain name. It should usually contain something like "localhost:4200" ...

See our tutorial here.

[danielapereira11]

@CodeAndWeb

Ok. There are tools out there to check your json file - if it does not contain sensitive data you can for example paste it here: https://jsonlint.com

We have done that and everything passed. No issues.

Another option is that the file that is received is not json. E.g. the file does not exist and instead of the json a html page with the error message is received.

The path is correctly leading to the .json file. Here is some of the data coming through with the error log:

"data": {
      "name": "HttpErrorResponse",
      "body": "https://admin.exoclick.com/assets/i18n/en.json",
      "payload": "https://admin.exoclick.com/assets/i18n/en.json",
      "status": 200,
      "errMsg": "Http failure during parsing for https://admin.exoclick.com/assets/i18n/en.json",
      "detailErrMsg": {
        "isTrusted": true
      },
      "time": 1675068698991,
      "appVersion": "3.369.3",
      "rawStack": null,
      "stack": null,
      "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/109.0",
      "url": "/",
      "errorType": "generic"
    },

I am a bit confused by the error message your are receiving. Its it really example.com? I had assumed that you replaced the domain name. It should usually contain something like "localhost:4200" ...

:) No. It's not example.com. I replaced the domain, because I though it was irrelevant. Also didn't replace with 'localhost:4200' because issue is happening in production and not on localhost.

See our tutorial here.

Everything in the app is implemented and working fine in terms of translations. We just get this error every now and then that, of course, interferes with our User Experience. And ultimately we're trying to figure out where this might be coming from seeing as the implementation seems solid.

[CodeAndWeb]

That file seems to be ok - and I can access it - except from Safari but this is because of my content blocker.

When you get the error, you could open the browser dev tools and take a look at the requests. You should find the access to that file. See if there's something going wrong - or if you can see the content it gets.

[danielapereira11]

When you get the error, you could open the browser dev tools and take a look at the requests.

We can't really do that because the error isn't a consistent one and we haven't been able to reproduce it on our side - we receive the reports from errors that our users have while using our application. However, we believe that if it were something directly related to our implementation it would happen much more consistently than it does.

Is this not an issue that's been highlighted or looked into previously?

[CodeAndWeb]

I'd assume that this is indeed not an issue with your app but your server. Maybe the web server logs show something...

[dodomui]

I'm having the same error happens randomly in the sentry error log tracking. Hosted under firebase hosting paid version.

My backup solution is refresh the page if detected such error. Still seek for better optimization.