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?
CodePudding user response:
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