Ionic3 lazy download and translation do not work together

Question

I recently updated Ionic and now its Ionic3

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

The same code worked fine without lazy loading, but we need to use lazy loading to increase application loading time and reduce the duration of the burst.

The import component app.module.ts 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 runtime exception that is set

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

, , .

, , . , ngx-translate:

1)

ngx-translate run

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

2)

ngx-translate, NgModule .

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)

Ionics ngx-translate, component.module.ts

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 {}