Ngx-translate downloads json but does not translate

Ionic Framework ionic-v3
1

I installed the ngx-translate as the documentation explains.

But now I’m facing the service is loading the json with the translations but it’s not translating neither by pipe nor by code.

My code:

es.json

{
    "HELLO": "Holis"
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { AndroidFullScreen } from '@ionic-native/android-full-screen';
import { IonicStorageModule } from '@ionic/storage';
import { HttpModule, Http } from '@angular/http';

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

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

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    }),
    IonicModule.forRoot(MyApp, {
      preloadModules: true
    }),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AndroidFullScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform, AlertController, ToastController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { Storage } from '@ionic/storage';

import { AndroidFullScreen } from '@ionic-native/android-full-screen';

import { TranslateService } from '@ngx-translate/core';

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    @ViewChild(Nav) nav: Nav;

    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private androidFullScreen: AndroidFullScreen, private storage: Storage, public translate: TranslateService) {
        this.initializeApp();

        // Ponemos la app a fullscreen
        this.androidFullScreen.isImmersiveModeSupported()
            .then(() => this.androidFullScreen.immersiveMode())
            .catch((error: any) => console.log(error));
    }

    initializeApp() {
        this.platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.

            this.translate.addLangs(['es']);

            // Iniciamos las traducciones
            this.translate.setDefaultLang('es');

            this.translate.use('es');

            this.translate.get('HELLO').subscribe((res: string) => {
                console.log('Traducción=', res);
                // Instead of displaying "Holis", this shows "HELLO". This happens even with the pipe in the template
            });

            this.statusBar.styleDefault();
            this.splashScreen.hide();
        });
    }

}

When I log the translateService object, it has the document loaded in its provider, but does not display any translation.
If I add a new translation by code, it DOES show that one.

Am I doing anything wrong?

Versions:
@angular: 4.1.3
@ngx-translate/core: ^7.1.0
@ngx-translate/http-loader: ^1.0.2
ionic-angular: 3.6.0

1 Like