Ionic3集成@ngx-translate遇TranslateService.get报错：Object(...) is not a function

Hey there, I’ve run into this exact error before when setting up @ngx-translate (formerly ng2-translate) in Ionic 3—let’s get you sorted out!

The Root Cause #

This error almost always boils down to version incompatibility. Ionic 3 relies on Angular 5.x and RxJS 5.x, but newer versions of @ngx-translate/core and @ngx-translate/http-loader are built for Angular 6+ and RxJS 6+, which use syntax that Ionic 3 can’t handle.

Step-by-Step Fix #

1. Uninstall Mismatched Packages

First, remove any existing translate packages you might have installed (they’re likely too new):

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

2. Install Ionic 3-Compatible Versions

Install the specific versions that work with Angular 5/Ionic 3:

npm install @ngx-translate/core@8.0.0 @ngx-translate/http-loader@2.0.0 --save

3. Verify Your app.module.ts Configuration

Double-check your module setup to make sure it matches this correct pattern (note the use of HttpClient instead of the old Http):

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http'; // Important!
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

@NgModule({
  declarations: [/* Your components */],
  imports: [
    BrowserModule,
    HttpClientModule, // Required for translate loader
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    }),
    // ... other Ionic modules like IonicModule.forRoot(MyApp)
  ],
  providers: [/* Your providers */],
  bootstrap: [/* Your root component */]
})
export class AppModule {}

4. Check TranslateService Usage in Components

Make sure you’re using the service correctly (avoid any RxJS 6+ pipe syntax, since Ionic 3 uses RxJS 5):

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(private translate: TranslateService) {
    // Set default language
    this.translate.setDefaultLang('en');
    // Use browser language or fall back to default
    const browserLang = this.translate.getBrowserLang();
    this.translate.use(browserLang.match(/en|es/) ? browserLang : 'en');
  }

  // Example of using translate.get()
  greetUser() {
    this.translate.get('GREETING').subscribe((translation: string) => {
      alert(translation);
    });
  }
}

Why This Works #

Version 8.x of @ngx-translate/core is the last major release compatible with Angular 5. Newer versions use RxJS 6+ operators like pipe() which don’t exist in RxJS 5, causing the "Object(...) is not a function" error when calling TranslateService.get().

内容的提问来源于stack exchange，提问作者Aaden Sah metalhead101