[ionic 4] Anybody has a working demo using ngx-translate and ionic 4.0.0-rc.0?

Ionic Framework
4

[V4] With lazy loading it not so hard. (I put “…” in some snippets code)
In your app.module.ts
…

import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

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

@NgModule({
  declarations: [AppComponent],
  entryComponents: [
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (setTranslateLoader),
        deps: [HttpClient]
      }
    }),
    AppRoutingModule,
   ..)
  ],
  providers: [
   ..
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

then in app.components.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { Router } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  
  constructor(
    private translate: TranslateService
  ) {
  
    ...
    this.initTranslate();
  }

  
  /**
   * @private
   */
  private initTranslate() {
    var self = this;
    var userLang = "it";
    // Set the default language for translation strings, and the current language.
    this.translate.setDefaultLang(userLang);

    // retrieve browser language
    if (this.translate.getBrowserLang() !== undefined) {
      userLang = this.translate.getBrowserLang();
    }

    // init the list of pages 
    this.translate.use(userLang).subscribe(langObj => {
      // here the translate service is ready
      self.appPages = [
        { title: self.translate.instant('HOME.TITLE'),  url: '/members/dashboard' , icon:'home'},
      
      ];
    })

  }
}

Then in each page module you have to import “TranslateModule”. For example

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { DashboardPage } from './dashboard.page';
import { TranslateModule } from "@ngx-translate/core";

const routes: Routes = [
  {
    path: '',
    component: DashboardPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TranslateModule,
    RouterModule.forChild(routes),
  ],
  declarations: [DashboardPage]
})
export class DashboardPageModule {}

And at the end, if you want use in a page.ts you have to import TranslateService:

import { Component, OnInit } from '@angular/core';
import { TranslateService } from "@ngx-translate/core";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.page.html',
  styleUrls: ['./dashboard.page.scss'],
})
export class DashboardPage implements OnInit {

   myvarToTranslate:string="";

  constructor(private translate: TranslateService) { }

  ngOnInit() {
    myvarToTranslate = this.translate.instant('DASH.TITLE')
  }
}

Obviousoly in in your assets/i18n/it.json or en.json de.json etc…
you must have:

{
  "DASH": {
    "TITLE": "Mio titolo ITALY",
  },

  "HOME": {
    "TITLE": "Titolo Home ITALY",
  }
}