多语言 @ngx-translate Ionic 3 Object(...) 不是 TranslateService.get 的功能问题？

Posted 2023-03-13

【中文标题】多语言 @ngx-translate Ionic 3 Object(...) 不是 TranslateService.get 的功能问题？

【英文标题】：Multi Language @ngx-translate Ionic 3 Object(...) is not a function at TranslateService.get Issue?

【发布时间】：2018-10-04 08:24:33

【问题描述】：

我想实现多语言功能。我关注了https://ionicframework.com/docs/developer-resources/ng2-translate/。但我得到 Object(...) is not a function at TranslateService.get 错误

我在谷歌上搜索过这个错误，但没有运气。我关注了这个https://codesundar.com/lesson/ionic-multi-language-support-i18n/

这里是代码

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>

包.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"

错误

请帮忙。谢谢

【参考方案1】：

首先通过以下命令删除您的插件

npm remove @ngx-translate/core @ngx-translate/http-loader --save

然后安装插件

npm install @ngx-translate/core@9.1.1 @ngx-translate/http-loader@2.0.1  --save

---

更多细节

选择与您的 Angular 版本对应的版本：

Angular      || @ngx-translate/core || @ngx-translate/http-loader

7/8          || 11.x+               || 4.x+
6            || 10.x                || 3.x
5            || 8.x to 9.x          || 1.x to 2.x
4.3          || 7.x or less         ||  1.x to 2.x
2 to 4.2.x   || 7.x or less         || 0.x

【参考方案2】：

删除最新的 ngx-translate 并安装其旧版本。

使用命令删除@ngx-translate/core (10.0.1)

npm remove @ngx-translate/core

然后通过命令安装9.1.1版本的@ngx-translate/core

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

【参考方案3】：

此错误是因为您使用 angular v5 和最新的 ngx-translate 版本 10，它与 angular v5 不兼容。要将 ngx-translate 与 angular v5 一起使用，您需要使用 ngx-translate 9.x 版本，错误就会消失。你可以在@ngx-translate/core GitHub repo 中找到这个，他们已经清楚地提到了 Object(...) 的原因不是函数错误