Ngx-translate is not working with Ionic 3 Angular 5

I have created a app in Angular 5 using ionic 3 but ngx-translate is not loading the correctly. I used lazy-loading in every page.


import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import {HttpClientModule, HttpClient} from '@angular/common/http';
export function createTranslateLoader(http: HttpClient) { 
    return new TranslateHttpLoader(http, './assets/i18n', '.json');
imports: [
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]


constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, public translate: TranslateService) {
    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.
        console.log("Loaded Page");
initTranslate() {
    this.translate.addLangs(["en", "hi"]);

    this.translate.get("HOME").subscribe((res: string) => {



As my json stated my log should print Home but its printing the HOME. point out what mistake I’m doing? Any help would be Appreciated Thanks.

1 Like

Hi @abhishekphoeniixx. Did you solve this? I have the same problem.

@abhishekphoeniixx I solved it changing HttpClient for Http. It seems that Ngx-translate doesn’t work with HttpClient at Ionic 3 Angular 5.

That’s not true. You need to make sure you have the appropriate versions of ngx-translate things, but HttpClient works just fine with it in Ionic 3 / Angular 5 apps.

Sorry, @rapropos. Although I’m using the correct versions this was the only solution that worked for me.

“Correct” implies that there’s only one right answer. I used “appropriate” because some versions of @ngx-translate/http-loader (0.x) work with Http and others work with HttpClient (1+.x). From a working Ionic app’s package.json that uses basically the initialization structure documented here including HttpClient:

"@angular/common": "^5.2.9",
"@ngx-translate/core": "^9.1.1",
"@ngx-translate/http-loader": "^2.0.1",
"ionic-angular": "^3.9.2",

See: Error while using ngx-translate in ionic3

I’m not really sure what’s going on with the quoting here, but I didn’t say what I am apparently being quoted as saying.

Sorry, fixed.

Post must be at least 20 characters,