Ionic3 lazy loading and translate don't work together

Question

Recently I upgraded the Ionic and now its Ionic3

Now the current application does not work with Ionic and ng2-translate altogether.

The same code was working fine earlier without lazy loading, but we need to use lazy loading as to improve application loading time and reduce splash shown duration.

The app.module.ts import component looks like

TranslateModule.forRoot({
provide: TranslateLoader,
useClass: TMATranslationLoader
})

TMATranslationLoader looks like

export class TMATranslationLoader implements TranslateLoader {
  constructor(  ) { }

  getTranslation(lang: string): Observable<any> {
    switch(lang) {
      case 'nl':
        return Observable.of(translations_nl);
      case 'hi':
        return Observable.of(translations_hi);
      // case 'de':
      //   return Observable.of(translations_de);
      // case 'fr':
      //   return Observable.of(translations_fr);
      // case 'es':
      //   return Observable.of(translations_es);
      default:
        return Observable.of(translations_en);
    }
  }
}

app.component.ts looks like

this.rootPage = 'LoginPage';

login-page.html looks like

<ion-label floating>{{ 'LBL_USERNAME' | translate }}</ion-label>

The run time exception which is trown

Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'translate' could not be found (" <ion-list>
<ion-item class="icon-user">
<ion-label floating>{{ [ERROR ->]'LBL_USERNAME' | translate }}</ion-label>

Any idea? Did I do something wrong?

Answer 1

Since lazy load pages include their own module, now you need to import the translate module in every lazy load page's module where it's going to be used.

Please take a look at ionic docs related to this. Like you can see there, the steps to use ngx-translate are:

1) Installing

To install ngx-translate run

npm install @ngx-translate/core @ngx-translate/http-loader --save.

2) Bootstrapping

To use ngx-translate, it must first be imported and added to the imports array in the NgModule of the application.

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

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

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ]
})

3) Lazy loading pages

If you want to use Ionics lazy loading pages together with ngx-translate, you have to configure your component.module.ts files

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { HelloPage } from './hello-page';

@NgModule({
  declarations: [
    HelloPage,
  ],
  imports: [
    IonicPageModule.forChild(HelloPage),
    TranslateModule.forChild()
  ],
  exports: [
    HelloPage
  ]
})
export class HelloPageModule {}