Angular 7 prod build i18n files not found

Question

I am trying to deploy an Angular 7 app that uses ngx-translate and translated language files in the /dist/assets folder. I specified the correct base href in build. After deployment, I see everything loads, except the languages file which returns an error code 404 (not found).

Ive tried changing the angular.json file a few different ways. I tried changing the TranslateHttpLoader. Nothing seems to be working. I can see the i18n folder with all the language files in the /dist folder. However its not being referenced.

in app.module.ts

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

in angular.json

"assets": [
  "src/favicon.ico",
  "src/assets"
],

But i end up getting this error in the browser:

/assets/i18n/en.json 404 not found

Any help would be appreciated!

Answer 1

On Angular 9.0.4 I faced the same issue.

Only when I had a dot slash prefix in the path as ./assets/i18n/ would the issue be resolved:

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