1. 技术文章
  2. ngx-translation issue with ionic 3 app

ngx-translation issue with ionic 3 app

由 落爺英雄遲暮 提交于 2019-12-03 20:45:55

i have updated my language module and this worked for me, not sure if this is right way but it's worked.

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

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

@NgModule({
  declarations: [
    LanguagePage,
  ],
  imports: [
    IonicPageModule.forChild(LanguagePage),
    TranslateModule.forChild({
            loader: {
                      provide: TranslateLoader,
                      useFactory: (createTranslateLoader),
                      deps: [Http]
                    }

        })
  ],
  exports: [
    LanguagePage
  ]
})
export class LanguagePageModule {}

i have added loader for child and export TranslateHttpLoader in language.module.ts

language.ts

langselect(form: NgForm){
    let langselcode = this.langform.value.langcode;
    this.storage.set('AppLangcode', langselcode);
    this.translate.use(langselcode);
  }

I spent hours to get it working on Ionic 3. Finally I had to add HttpClientModule to the import section of app.module.ts. Hope that helps.

[2]: Use HttpClient instead of Http

[3]: Add HttpClientModule

[4]: Use HttpClient instead of Http

src/app/app.module.ts:

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

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

@NgModule({
    ...
    imports: [
        BrowserModule,
        HttpModule,
        HttpClientModule [2],
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: createTranslateLoader,
                deps: [HttpClient] [3]
            }
        ...
    ...
}),

src/pages/[your-page]/[your-page].module.ts

imports: [
    IonicPageModule.forChild(LoginPage),
    TranslateModule.forChild(),

],

I had the same issue and managed to fix it. I'm lazy loading the pages and the problem occurred when I try to change the language from a component. He's how I fixed it.

app.component.ts

this.translateService.addLangs(['en', 'lk']);
this.translateService.setDefaultLang("en");
this.eventProvider.currentLang.subscribe(lang => {
  this.translateService.use(lang);
});

event-provider.ts

import { EventEmitter } from '@angular/core';
export class EventProvider {
  public currentLang: EventEmitter<string> = new EventEmitter();
  setLang(val) {
    this.currentLang.emit(val);
  }
}

Import event-provider.ts to App Module and include in providers.

Now you can import it to any component where you need to change the language and emmit the value.

custom-header-component.ts

setLanguage(val:string) {
  this.eventProvider.setLang(val);
}

Finally, i a solve this issue by using HttpClientModule in the import section of app.module.ts. maybe it helps.

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

So, the code is as follow: app.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';

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

export class HomePageModule {}

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

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>
标签
json
cordova
ionic-framework
ionic3
ngx-translate
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!