Ionic 3 with ngx-translate - Lazy loaded

user_3527807 0
Viewed 2069

I'm trying to integrate the ngx-translate plugin into my Ionic 3 project with lazy loading. I've followed the guide on the Ionic Framework website.

The default language loads but using translate.use() has no effect at all.

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

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

ngx-translate ionic-framework angular multilingual lazy-loading
3 Answers

I spent hours to get it working. Finally, I had to add HttpClientModule to the import section of app.module.ts (in your case maybe it's - home.module.ts). Hope that helps.

First: Import HttpClientModule Second: Use HttpClient instead of Http.

So, the code is as follow: app.module.ts (In your case 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 {}

In app.component.ts add this line in constructor.

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

And then you have to create two JSON files in ./assets/i18n/ path.

en.JSON

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

Then use in your app with PIPE filter like this.

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

OR

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

We can also pass a parameter.

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

OR

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

After spending a lot of time with this exact problem, I found the solution on this github thread: https://github.com/ngx-translate/core/issues/574

Specifically this solved the problem:

Only the page that is changing the language needs to have the second loader in it: (TranslateModule.forChild({...}). All other pages just need >TranslateModule.forChild()

So you have to add in [your-lang-changing-page].module.ts the same content you wrote in app.module.ts, this time for the child:

Used version:

  • angular: 5.2.10
  • ngx-translate: 9.1.1
  • ionic: 3.2

Example where I change language on first app start via buttons "tutorial.module.ts":

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TutorialPage } from './tutorial';
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {createTranslateLoader} from "../../app/app.module";
import {HttpClient} from "@angular/common/http";

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

user_75349840
Related