Translateservice is not working in two pages in Ionic3?

Question

Hello there am trying to develop language translation using i18n in Ionic 3. For this i used ngx-translate service. it is works in single page only but not working in multiple pages Can you please help me out from this?

Thansk & Regards

I have a json files in assests/i18n/ folder with names of es.json, en.json, hin.json.

I have wrote below code for test page also but it is shows an error message called

Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'translate' could not be found ("
    </ion-list>

    <p>{{[ERROR ->]'HELLO WORLD!' | translate}}</p>

    <ion-item>
"):

Please give me a solution for this.

Here is the some part of HTML Code :

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

<ion-content padding>  
   <ion-list inset class="no-border">
      <ion-item>
         <ion-label>{{'HELLO WORLD!' | translate}}</ion-label>
         <ion-input required type="text"></ion-input>
      </ion-item> 
   </ion-list>
   <p>{{'HELLO WORLD!' | translate}}</p>
   <ion-item>
      <ion-label>Select Language</ion-label>
      <ion-select #l (ionChange)="languagefilter(l.value);">
         <ion-option value="en">English</ion-option>
         <ion-option value="es">Spanish</ion-option>
         <ion-option value="hin" (click)="new()">Hindi</ion-option>
      </ion-select>
   </ion-item>
   <button ion-button (click)="chainaddition()">Login</button>
</ion-content>

Here is the TS code

 constructor(public navCtrl: NavController, public translate: TranslateService) {
    let temp = localStorage.getItem("language");
    if(temp=='en'){
      translate.setDefaultLang('en');
      alert("English")
    } else {
      translate.setDefaultLang(temp);
      localStorage.removeItem("temp");
      // alert(this.alertmessage);
    }
  }
  languagefilter(value) {
    localStorage.setItem("language", value);
    location.reload();
   }
  chainaddition() {
    this.navCtrl.push("TestPage");
  }

score 0 · Answer 1 · answered Jul 26 '19 at 05:56

translate pipe is part of TranslateModule. Unlike services, component, directive and pipe are not global. You need to import the module of a pipe you want to use.

You need to import TranslateModule (do not call forRoot function) in every module or you can create a SharedModule and import this SharedModule everywhere else as it is mentioned in the docs

If you use a SharedModule that you import in multiple other feature modules, you can export the TranslateModule to make sure you don't have to import it in every module.

@NgModule({
    exports: [
        CommonModule,
        TranslateModule
    ]
})
export class SharedModule { }

Note: Never call a forRoot static method in the SharedModule. You might end up with different instances of the service in your injector tree. But you can use forChild if necessary.

Translateservice is not working in two pages in Ionic3?

1 Answers1