CODEWITHSUNDEEP
ionic-frameworkionic2
Rafael de Castro
Rafael de Castro

Reputation: 1078

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

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

Upvotes: 2

Views: 10196

Answers (3)

Russ
Russ

Reputation: 631

I ran into this in Angular v18 after the assets folder has now become the public folder. After switching the folder name & location (per the v18 standards - it now resides as a sibling to the src directory), I had to change to use this (with my i18n folder residing inside public:

function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, "i18n/", ".json?v=2.5.0");
}

Upvotes: 0

JAGJ jdfoxito
JAGJ jdfoxito

Reputation: 777

SEARCH

        key: "loadUrl",
        value: function(t, e) {
            var n = this;

THEN ADD,

if (t !== undefined) t = t.replace("../../../app-assets/", "../../../control/app-assets/");

Upvotes: 0

Leonardo G.
Leonardo G.

Reputation: 177

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 /

Upvotes: 3

Related Questions