Translate Pipe not working

I am trying to use translate pipe. While in app.component.ts it is showing in console correctly. But when using in login.html it is giving error pipe not found(see scrreen shot). Please guide how to use translate pipe so i can use in all over my app. Here is my code

app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoginPage } from '../pages/login/login';
import { SignupPage } from '../pages/signup/signup';
import { ReactiveFormsModule } from '@angular/forms';
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: [
    MyApp,
    HomePage,
    LoginPage,
    SignupPage
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ReactiveFormsModule,
    IonicModule.forRoot(MyApp),
    TranslateModule.forRoot({
      loader:{
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [HttpClient]
      }
    }),TranslateModule.forChild()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    LoginPage,
    SignupPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage } from '../pages/login/login';
import { TranslateService } from '@ngx-translate/core'

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = LoginPage;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, translate: TranslateService) {
    platform.ready().then(() => {
      statusBar.styleDefault();
      splashScreen.hide();
      translate.setDefaultLang('ar');
      translate.get('LOGIN').subscribe(res => {
        console.log('my result: ', res);
      });
    });
  }
}

Login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FormControl, FormGroup, FormBuilder, FormArray, Validators } from '@angular/forms';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private fb: FormBuilder) {
  }
}

Login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
@NgModule({
  declarations: [
    LoginPage,   
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  
  ],
})
export class LoginPageModule {
  constructor(){}
}

Login.html


<ion-header>

  <ion-navbar color="primary">
    <ion-title>
    	 {{ 'LOGIN.TITLE' | translate }}
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
<div translate>LOGIN.TITLE</div> 
  <button ion-button round (click)='signup()'>Sign Up</button>
</ion-content>

Check the TranslateService version in the package.json. Not sure if it was this but I ran into the same issue and it was because I was using the latest version of someonething related to translating. I think the one that gave me an error was version 10 which is supposed to be for Angular 6, not 5

Please search the forums before posting. There is a thread less than 24 hours old with the exact same symptoms, problem, and solution: even down to the fact that OP was trying to use the translate pipe in a login page.

1 Like

this is package.json.

{
  "name": "SedarDealer",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "4.8.0",
    "@ionic-native/splash-screen": "4.8.0",
    "@ionic-native/status-bar": "4.8.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "ng2-translate": "^5.0.0",
    "rxjs": "5.5.11",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.10",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

Can you please check if any thing i should change?

Found the solution this is correct for me. In my app angular 5 not matching with ngx-translate version . I installed @ngx-translate 9.0.0. that solved the problem. See the version table here. Thanks problem solved.

2 Likes

glad it helped :slight_smile: .

Thanks, It worked. Helped a lot.