Ngx-translate does not find json file (404 not found)

Ionic Framework ionic-v3
1

Hi everyone

so Im trying to globalize my app using ngx-translate; there is 2 languages Im providing : English and Persian (which is a RtL language) i followed the steps in https://github.com/ngx-translate/core and https://ionicframework.com/docs/developer-resources/ng2-translate/
and created two json files one for English (en.json) and one for Persian (fa.json).
(Farsi and Persian are the same :slight_smile: )

But here is the problem : the translation procedure works fine for en.json but when i want to switch it to Persian the browser console shows :

GET http://localhost:8100/assets/i18n/fa.json/ 404 (Not Found)

!Notice the extra slash at the end of the URL!
and
RROR HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: “Not Found”, url: “http://localhost:8100/assets/i18n/fa.json/”, ok: false, …}

I don’t know why it happens thanks for helping me in advance.

this is my App.module.ts :

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { SignUpPage } from '../pages/sign-up/sign-up'
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule, TranslateLoader} from '@ngx-translate/core';
import { TranslateHttpLoader} from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { TranslateService } from '@ngx-translate/core'

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

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SignUpPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    ReactiveFormsModule,
  
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
           provide: TranslateLoader,
           useFactory: (createTranslateLoader),
           deps: [HttpClient]
         }
      })
    
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SignUpPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

app.component.ts:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
import { HomePage } from '../pages/home/home';
import { platformBrowser } from '@angular/platform-browser';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private translate: TranslateService) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
  });

  
  translate.setDefaultLang('en');
}

  
  translateTo(language: string) {
    this.translate.use(language)

  }


  
  translateToFarsi(language: string, platform:Platform){
    this.translate.use('fa');
    this.translate.onLangChange.subscribe((event: LangChangeEvent) =>
  {
    if(event.lang == 'fa')
    {
      platform.setDir('rtl', true);
      platform.setDir('ltr', false);
    }
    else
    {
      platform.setDir('ltr', true);
      platform.setDir('rtl', false);
    }
  });
  }

app.html:

<ion-nav [root]="rootPage"></ion-nav>

<button ion-button clear (click)="translateTo('en')">English</button>
<button ion-button clear (click)="translateToFarsi('fa')">Farsi</button>
2

OK! i tried to change the json file name to ar.json which makes it go above the en.json and it worked! what was the problem??