Ngx-translate: ..assets/i18n/ja.json: 404 Not Found after deployment

[ShreyaGLMS]

I am using below code for transkation.
It's totally working fine on localhost but when I deploy this on dev environment it's giving me below error.

Build created for publish also showing the json files and uloaded succesfully on server.
Can anyone help me with this issue.

angular 12
ngx-translate/core@13.0.0
@ngx-translate/http-loader@6.0.0
....
import { HttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http);
}

@NgModule({
declarations: [
...
],
imports: [
...
...
TranslateModule.forRoot(
{
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient]
}
}
)
],
providers: [ HttpClient,
{
provide: LocationStrategy,
useClass: HashLocationStrategy,
},
{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true } ],
bootstrap: [AppComponent],
})
...

[Galileon-venta]

If you can't access the file when entering the given url into your browser by hand, its a config issue of your webserver

[rewritestar]

If someone has a problem with this kind of 404 not found error, and any other solutions on the internet didn't solve it, try this.
You need to have your {lang}.json file in src/assets/i18n/{lang}.json

In angular.json.

• as-is

"projects": {
  "[YOUR_APP_NAME]": {
    "architect":{
       "build":{
         "options":{
           "assets": [
                {
                  "glob": "**/*",
                  "input": "public"
                }
              ],
        }
      },
      "test":{
         "options":{
           "assets": [
                {
                  "glob": "**/*",
                  "input": "public"
                }
              ],
        }
      }
    }
  }
}

• to-be

"projects": {
  "[YOUR_APP_NAME]": {
    "architect":{
       "build":{
         "options":{
           "assets": [
                {
                  "glob": "**/*",
                  "input": "src"
                }
              ],
        }
      },
      "test":{
         "options":{
           "assets": [
                {
                  "glob": "**/*",
                  "input": "src"
                }
              ],
        }
      }
    }
  }
}

• or if you want to keep your original asset configuration in angular.json, then put your assets/i18n/{lang}.json folder in your public folder. ([YOUR_APP_NAME]/public/assets/i18n/{lang}.json)

[Nort0nAntivirus]

#1478 (comment)

I was having a slightly different error, but your comment helped me resolve it. In my case, it is in a dev environment and the directory was src/assets/i18n/, but I was getting a -> GET http://localhost:4200/assets/i18n/en.json 404 (Not Found).
When changing the directory in angular.json to 'src', or moving the assets folder to the public directory, it worked correctly.

My AppConfig.ts

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

function provideTranslateModule() {
  const translateModule = TranslateModule.forRoot({
    loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient],
    },
  });

  return translateModule.providers ? [...translateModule.providers] : [];
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideHttpClient(),
    provideAnimationsAsync('noop'),
    ...provideTranslateModule(),
  ],
};