Ngx-translate not working on 'ready-made' tabs template

Ionic Framework ionic-v3
1

I have created a ready made tabs template and the lazy loading didn’t work at home page.
Any idea?

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import {HttpClient, HttpClientModule} from "@angular/common/http";
import {TranslateLoader, TranslateModule} from "@ngx-translate/core";
import {TranslateHttpLoader} from "@ngx-translate/http-loader";

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


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

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 { TranslateService } from '@ngx-translate/core';

import { TabsPage } from '../pages/tabs/tabs';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
    rootPage:any = TabsPage;

    constructor(private translate: TranslateService, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
        platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            statusBar.styleDefault();
            splashScreen.hide();
        });
        this.initTranslate();
    }

    initTranslate() {
        // Set the default language for translation strings, and the current language.
        this.translate.setDefaultLang('en');


        if (this.translate.getBrowserLang() !== undefined) {
            this.translate.use(this.translate.getBrowserLang());
        } else {
            this.translate.use('en'); // Set your language here
        }

    }
}

home.component.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 {

    constructor(private translate: TranslateService, public navCtrl: NavController){}

	public changeLanguage(language) {
		this.translate.use(language);
	}
}

error

Object(…) is not a function
at TranslateService.get (ngx-translate-core.js:495)
at TranslateDirective.updateValue (ngx-translate-core.js:704)
at TranslateDirective.checkNodes (ngx-translate-core.js:672)
at TranslateDirective.ngAfterViewChecked (ngx-translate-core.js:639)
at callProviderLifecycles (core.js:12751)
at callElementProvidersLifecycles (core.js:12715)
at callLifecycleHooksChildrenFirst (core.js:12698)
at checkAndUpdateView (core.js:13853)
at callViewAction (core.js:14195)
at execComponentViewsAction (core.js:14127)

Versions:

Ionic 3 + Angular 5 + ngx-translate 9

Thank you!

2

See: https://www.codeandweb.com/babeledit/tutorials/how-to-translate-your-angular-app-with-ngx-translate

Note: This tutorial uses Angular 5 together with ngx-translate 9.
The newest version of ngx-translate is 10.x.x and requires Angular 6.

And: https://ionicframework.com/docs/developer-resources/ng2-translate/

3

Are you sure you are using ngx v9?

“Object(…) is not a function” is typically a wrong version of ngx-translate

4

Thank you reedrichards. I think that’s the problem cause I’m using ngx v10. I would like to use this latest version, but I will try 9th version anyway.
In my package.json:

"@ngx-translate/core": "^10.0.1",
"@ngx-translate/http-loader": "^3.0.1",
1 Like