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

Ionic Framework
1

Anybody has a working demo using ngx-translate and ionic 4.0.0-rc.0? I’m not able to make it work. If anybody has a working demo/repo, I would greatly appreciate sharing it so I can learn. Thanks!!!

1 Like
2

If you don’t get any better answers, one thing you might try is opting completely out of the lazy-loading stuff, in which case everything should work just as it did previously.

3

Pardon my ignorance but how do I opt out of lazy-loading? Can I create a new ionic4 project without lazy-loading on it?

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",
  }
}
5

hello,

Pardon my ignorance but how do I opt out of lazy-loading? Can I create a new ionic4 project without lazy-loading on it?

If you use lazy loading or not depends on which module you import your things.
At start up app.module.ts is called. Every thing in there is eagerly loaded because it is …tada…loaded at start up.

You can also create your components, for example, whatever, with a whatever.module.ts. in whatever-folder. Every thing in this module is called, when you call whatever component, that is lazy loading.

You can mix eager and lazy loading in an app, but you can not add one import to both loading types. Imho providers must always go to app.module.ts

Sometimes you see an extra foo.module.ts, where someone, for example, material.io has defined all his things. You can add this to app.module.ts, then it is eager loaded or you add it to whatever.module.ts, then it is lazy loaded.

What @rapropos stated is, (I hope I am right) that lazy loading could cause unexpected problems. I personally had never got problems with lazy loading. But now you can test it easily. Add imports to both of them and comment one out and see if something is changing.

Best regards, anna-liebt

6

@rapropos and @proiertti thank you so much for your suggestions. With @anna_liebt explanation I was able to test both scenarios: with and without lazy-loading and both worked as expected.

I would argue that for simple/small apps, lazy-loading may not be truly necessary (at least it is not in my case)