Multi Language @ngx-translate Ionic 3 Object(…) is not a function at TranslateService.get Issue?

Ionic Framework ionic-v3
1

Hello,
I would like to implement multi lingual functionality. I followed https://ionicframework.com/docs/developer-resources/ng2-translate/ . But I am getting Object(…) is not a function at TranslateService.get error

I have search google for this error but got no luck. I followed this https://codesundar.com/lesson/ionic-multi-language-support-i18n/

Here is the 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 { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClientModule, HttpClient } from '@angular/common/http';

// If I use this I get error !! Argument of type 'Http' is not assignable to parameter of type 'HttpClient'. Property 'handler' is missing in type 'Http'.
// import { HttpModule, Http } from '@angular/http';

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

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  lang:any;
  constructor(public navCtrl: NavController, public translate: TranslateService) {
    this.lang = 'en';
    this.translate.setDefaultLang('en');
    this.translate.use('en');
  }

  switchLanguage() {
    this.translate.use(this.lang);
  }
}

Home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>
    <ion-item>
      <ion-label>Language</ion-label>
      <ion-select [(ngModel)]="lang" (ionChange)="switchLanguage()">
        <ion-option value="en">English</ion-option>
        <ion-option value="ta">Tamizh (தமிழ்)</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item>
      <h2>{{ 'APPLE' | translate }}</h2>
    </ion-item>
    <ion-item>
      <h2>{{ 'BALL' | translate }}</h2>
    </ion-item>
    <ion-item>
      <h2>{{ 'CAT' | translate }}</h2>
    </ion-item>
  </ion-list>
</ion-content>

package.json

{
  "name": "ionLang",
  "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.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "^10.0.1",
    "@ngx-translate/http-loader": "^3.0.1",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

Error

werroe
werroe.PNG946×178 11.2 KB

Please help. Thanks!

1 Like
2

Downgrade ngx-translate/core to v9

See README GitHub - ngx-translate/core: The internationalization (i18n) library for Angular

**If you’re still using Angular v5, please use ngx-translate 9.x because version 10 and above are only compatible with Angular v6. If you try to use v10 with Angular v5 you will get an error message TypeError: Object(…) is not a function. **

2 Likes
3

can please share the CLI command for downgrading. Should I first remove it and intall again ?Thanks

4 
npm remove @ngx-translate/core --save
npm install @ngx-translate/core@9.1.1 --save

you could probably also stick to http-loader 2.0.1

npm remove @ngx-translate/http-loader --save
npm install @ngx-translate/http-loader@2.0.1 --save
22 Likes
5

Thanks for your help. I will give it a try.

1 Like
6

Senin taşşağını yesinler lan

1 Like
7

thanks a lot sir its working for me and above information are really helpful for me.

8

tassaklarına kurban hemen oldu bravoo