Ionic ngx-translate giving me assets/i18n/.json 404 (Not Found)

Issue

On my Ionic app the ngx-translate is giving me this message on console:

.... assets/i18n/.json 404 (Not Found)

With another details on HttpErrorResponse

So my app on BROWSER keeps giving this error, and when I build to use on phone it just trigger an alert message with this error and closes the app

My Setup: Android. "cordova-plugin-crosswalk-webview": "^2.4.0" <- LITE "@ngx-translate/core": "^9.1.1", "@ngx-translate/http-loader": "^2.0.1", Ionic 3

Here's my app.module.ts

import { HttpClientModule, HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })

I saw other users having issues with the

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

Changing it to just Http instead of HttpClient, but was no use for me. Typescript tells me the http has to be HttpClient type.

This is my app.component.ts

import { TranslateService } from '@ngx-translate/core';
.
.
.
constructor(
    private translateService: TranslateService,
    public platform: Platform,
    public statusBar: StatusBar,
    public splashScreen: SplashScreen
  ) {


    this.initializeApp();

  }

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();

      // this.setAppTranslation();
      this.translateService.addLangs(["en", "pt"]);
      this.translateService.setDefaultLang('en');
      this.translateService.use('en');

    });
  }

I've follow this tutorial to apply the function to my app: https://www.gajotres.net/ionic-2-internationalize-and-localize-your-app-with-angular-2/

Can anyone help me at least understand?

My assets/i18n folder has 2 files: en.json pt.json

Solution

I've had that problem before, try these two things:

Change your loader to this (as @Mohsen said):

return new TranslateHttpLoader(http, './assets/i18n/', '.json');

And your useFactory to this:

useFactory: (HttpLoaderFactory)

IMPORTANT: Make sure your assets folder is at this level:

/ src / assets /

Answered By - Leonardo G.