Ngx-translation not working across different modules in ionic

Issue

I want to make my ionic app to support multiple languages. I have created one service called translate-config.service.ts where I am getting and setting language as per user preference and storing selected language in local storage. below is my service

import { Injectable } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Storage } from '@capacitor/storage';
export const APPLICATION_LANGUAGE = 'appLanguage';
@Injectable({
  providedIn: 'root'
})
export class TranslateConfigService {

  constructor(
    private translate: TranslateService
  ) { }

  getDefaultLanguage() {
    
    let language: string;
    Storage.get({ key: APPLICATION_LANGUAGE }).then(res => {
      console.log("Language from service: ", res.value);
      //if language not set then set default language as browser language
      if (res.value === null || res === null || language === null) {
        language = this.translate.getBrowserLang();
        this.translate.setDefaultLang("en");
      } else {
        language = res.value;
        console.log("language::", language);
        this.translate.setDefaultLang(language);
      }

    }).catch(error => {
      //if error occured then set browser lanauge as default language
      language = this.translate.getBrowserLang();
      this.translate.setDefaultLang(language);
    });
    return language;
  }

  //below method will be called by user action to load specific json file to change application language text
  setLanguage(setlanguage) {
    console.log(setlanguage);
    this.translate.use(setlanguage);

    //story this language in local storage
    Storage.set({ key: APPLICATION_LANGUAGE, value: setlanguage });
  }
}

On select language component html showing dropdown with list of available languages and I am just setting language selected by user using below function

 languageChanged() {
    this.translateConfig.setLanguage(this.selectedLanguage);
  }

Then I have created Shared Module by which I should be able to get language across multiple modules , below is my shared module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//for transalation
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { TranslateConfigService } from '../../../app/services/translate-config.service';
import { HttpClient } from '@angular/common/http';

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


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    //for translation
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (LanguageLoader),
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    TranslateConfigService
  ],
  exports: [
    TranslateModule
  ]
})
export class TransalationSharedModule { }

I have imported Shared module in app.module.ts file , it is working fine for app.component.html But I have different modules too. Example Home.module.ts , Profile.module.ts. there I have imported shared module but it does not work, even no error for translate pipe too.

Am I doing something wrong or missing anything there?

Solution

As I understand you have to make few changes

First, you have to move your translate import package code into app.module.ts file

Second, I think you have enabled lazy loading so, in each *.module.ts file you have to import this package import { TranslateModule } from '@ngx-translate/core' Other logic parts looks good

So, once you done these changes then your code will be look correct

SAMPLE

app.module.ts

//for transalation
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

@NgModule({
  declarations: [
   ...
  ],
  imports: [   
 
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  entryComponents: [
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

Other.Module.ts

import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    TranslateModule
  ]
})
export class OtherModule { }

I hope you clear and this solutions will work for you

Answered By - Kishan Vaishnani