Ion 3 with ngx-translate - Lazy loaded

Question

I am trying to integrate the ngx-translate plugin into my Ionic 3 project with lazy loading. I followed the tutorial on the Ionic Framework website.

Downloading by default, but using translate.use()it has no effect.

I posted the project on gitbub and any help would be greatly appreciated.

Here is the repo link: https://github.com/sumodevelopment/ngx-translate-test

Answer 1

Update your home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { Http} from '@angular/http';

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

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    TranslateModule.forChild({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

And there is no need to use TranslateServiceProvider inapp.module.ts

Answer 2

, . , HttpClientModule app.module.ts ( , , - home.module.ts). , .

: HttpClientModule : HttpClient Http.

, : app.module.ts ( home.module.ts)

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

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

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

@NgModule({
    declarations: [
        HomePage,
    ],
  imports: [
    IonicPageModule.forChild(HomePage),
    HttpClientModule
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: (createTranslateLoader),
            deps: [HttpClient]
        }
    })
  ],
  exports: [
     HomePage
  ]
})

export class HomePageModule {}

app.component.ts constructor.

import {TranslateService} from '@ngx-translate/core';
...
translate.setDefaultLang('en');//So English language set 

JSON ./assets/i18n/.

en.JSON

{
   "title": "Translation demo",
   "text": "This is a simple demonstration app for {{value}}"
}

PIPE, .

<h1>{{'title' | translate}}</h1>

<h1 [translate]="'title'"></h1>

parameter.

<h1>{{'text' | translate:{'value':'ngx-translate'} }}</h1>

<h1 [translate]="'text'" [translateParams]="{value: 'ngx-translate'}"></h1>