loading HttpLoaderFactory translator not work after resume network connectivity

Issue

I am working on an app with these configurations:

1. @ionic/app-scripts : 3.1.9
2. Cordova Platforms : android 6.2.3
3. Ionic Framework : ionic-angular 3.9.2

I am using translate library from @ngx-translate/core for translating process. Problem what I am facing is that , My translator works fine in first case but when I disconnect network(data connectivity) and resume it later , translator does not work properly , it loads labels only not text assigned to it.

Code what i am using is

In module.ts file using

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


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

@NgModule({
declarations: [

],
imports: [
TranslateModule.forRoot({
loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
  }
})

My en.json file under assets folder is like this

{
"DashboardPage": {
    "WelcomeText": "Welcome",
    "LastUpdatedText": "Last Updated on",
    "Disbursal": "Disbursal",
    "NEA" : "NEA",
    "Yield" : "Yield"
}
}

and I am using labels on HTML like this

 <div *ngIf="IsFromLogin">
      <h2 >{{'DashboardPage.WelcomeText' | translate}} {{userData.name}}</h2>
    </div>

When I resume network connectivity screen shows labels like DashboardPage.WelcomeText instead of showing text assigned to it on all screens.

I have tried few of things but not able to get actual cause for this.can anyone suggest some solution for this.Thanks in advance!!

One more thing I want to add it doesn't work only on screen where app is at the time we paused mobile data connectivity on rest pages it works fine, but on the page where it faces problem remains same always though we navigate and return from other pages.

Solution

I have got solution for my problem after trying for a day .

I have referred this link for same Ionic3 lazy loading and translate don't work together

In my page module.ts (like in my case its dashboard.module.ts) instead of

imports: [
TranslateModule.forRoot({
loader: {
  provide: TranslateLoader,
  useFactory: HttpLoaderFactory,
  deps: [HttpClient]
 }
})

I have used code

imports: [
IonicPageModule.forChild(DashboardPage),
ComponentsModule,
TranslateModule.forChild()  
],

Answered By - Shilpi Jaiswal