I’m using “@ngx-translate/core” library to apply internationalization, I’ve created a helper service for it and configured it in all my modules, I also installed “ngx-translate-multi-http-loader”, To allow reading more than one key and then fetching it’s values from english or french files depending on the language needed.
My problem is that the import in my app module is not overrided in the shild module, This is my code.
This is my Child module:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CheckinCkeckoutRackRoutingModule } from './checkin-ckeckout-rack-routing.module';
import { IndexComponent } from './index/index.component';
import { LoadRackComponent } from './load-rack/load-rack.component';
import { RackInfoComponent } from './rack-info/rack-info.component';
import { RackActionComponent } from './rack-action/rack-action.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RackService } from '../../setup/manage-rack/service/rack.service';
import { ModalModule } from 'ngx-bootstrap/modal';
import { RacktransactionService } from '../service/racktransaction.service';
import { ManagestorageService } from '../../setup/manage-storage/services/managestorage.service';
import { SamplestoragelogserviceService } from '../../sample-storage-log/services/samplestoragelogservice.service';
import { FormsModule } from '@angular/forms';
import { SearchCriteriaService } from '../service/searchcriteriadata.service';
import { HttpBackend } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpLoaderFactory } from '@/shared/helpers/helper-transalation.service';
@NgModule({
declarations: [IndexComponent, LoadRackComponent, RackInfoComponent, RackActionComponent],
imports: [
CommonModule,
ReactiveFormsModule,
FormsModule,
CheckinCkeckoutRackRoutingModule,
ModalModule.forRoot(),
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: (httpBackend: HttpBackend) => HttpLoaderFactory(httpBackend, 'sample-storage'),
deps: [HttpBackend]
}
})
],
providers: [
RackService,
RacktransactionService,
ManagestorageService,
SamplestoragelogserviceService,
RackService,
SearchCriteriaService,
],
})
export class CheckinCkeckoutRackModule { }
And this is my App module:
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MegaMenuModule } from 'primeng/megamenu';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { MenubarModule } from 'primeng/menubar';
import { DropdownModule } from 'primeng/dropdown';
import { MessageService } from 'primeng/api';
import { MessagesModule } from 'primeng/messages';
import { MessageModule } from 'primeng/message';
import { ToastModule } from 'primeng/toast';
import { MenuModule } from '@progress/kendo-angular-menu';
import { ToastyModule, ToastyService } from 'ng2-toasty';
import { AngularMaterialModule } from '@material-controls-module/angular-material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';
import { GridModule } from '@progress/kendo-angular-grid';
import { ModalModule } from 'ngx-bootstrap/modal';
import { TreeViewModule } from '@progress/kendo-angular-treeview';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { HttpClientModule, HttpClient, HttpBackend } from '@angular/common/http';
import { ConfigService } from '@core-services/config.service';
import { getBaseUrl } from '@shared-helpers/helper-url';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { ConfirmDialogComponent } from '@shared-components/base-component/confirmDialog/confirm-dialog/confirm-dialog.component';
import { MatDialogModule } from '@angular/material/dialog';
import { InterceptorsList } from './core/interceptor/Interceptors';
import { LoaderServiceModule } from './core/layout/loader/loader-service.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { RegistrationService } from './modules/registration/Services/registration.service';
import { ToolsModule } from './modules/tools/tools.module';
// tslint:disable-next-line:max-line-length
import { PatientLastVisitComponent } from './modules/registration/component/Dialogs/patient-last-visit/patient-last-visit.component';
import { DynamicFileUploadComponent } from './dynamic-control-module/controls/dynamic-file-upload/dynamic-file-upload.component';
import { SharedFileUploadComponent } from './dynamic-control-module/controls/shared-file-upload/shared-file-upload.component';
import { DatePipe } from '@angular/common';
import { DyanmicRegFormService } from './modules/registration/Services/DynamicRegisterationServices/reg-dynamic-form.service';
import { LoyaltyModule } from './modules/loyalty/loyalty.module';
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule, Title } from '@angular/platform-browser';
import { HttpLoaderFactory } from './shared/helpers/helper-transalation.service';
import { KendoDatepickerComponent } from './shared/components/kendo-datepicker/kendo-datepicker.component';
import { KendoTimepickerComponent } from './shared/components/kendo-timepicker/kendo-timepicker.component';
@NgModule({
declarations: [
AppComponent,
ConfirmDialogComponent,
PatientLastVisitComponent,
DynamicFileUploadComponent,
SharedFileUploadComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MegaMenuModule,
ButtonsModule,
MenubarModule,
DropdownModule,
ToastyModule,
MessagesModule,
MessageModule,
ToastModule,
MenuModule,
GridModule,
AngularMaterialModule,
TreeViewModule,
DropDownsModule,
HttpClientModule,
LayoutModule,
ToolsModule,
MatDialogModule,
LoaderServiceModule,
ModalModule.forRoot(),
ToastyModule.forRoot(),
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (httpBackend: HttpBackend) => HttpLoaderFactory(httpBackend, 'app'),
deps: [HttpBackend]
}
}),
LoyaltyModule
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: setConfig,
multi: true,
deps: [HttpClient, ConfigService]
},
DatePipe,
MessageService,
ToastyService,
Title,
InterceptorsList,
RegistrationService,
DyanmicRegFormService,
],
bootstrap: [AppComponent]
})
export class AppModule { }
export function setConfig(http: HttpClient, configService: ConfigService) {
return async () => {
const resp = await http.get(getBaseUrl() + 'config.json').toPromise();
configService.configuration = <any>resp;
};
}
And This is my Translation helper service:
import { HttpBackend } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";
import { MultiTranslateHttpLoader } from "ngx-translate-multi-http-loader";
@Injectable({
providedIn: 'root',
})
export class TranslationHelperService {
/**
*
*/
constructor(private readonly translate: TranslateService) {
this.translate.use('en');
}
/**
*
* @param resourceKey
* @param resourceKeyParamters
* @returns Promise<string>
*/
public async getTransaltedMsg(resourceKey: any, resourceKeyParamters: any = null):Promise<string> {
if (!resourceKeyParamters) {
return await this.translate.get(resourceKey).toPromise();
} else {
return await this.translate.get(resourceKey, resourceKeyParamters).toPromise();
}
}
}
/**
*
* @param _httpBackend
* @param moduleName
* @returns
*/
export function HttpLoaderFactory(_httpBackend: HttpBackend, moduleName: string) {
return new MultiTranslateHttpLoader(_httpBackend, [
{prefix: './assets/i18n/shared/', suffix: '.json'},
{prefix: `./assets/i18n/${moduleName}/`}
]);
}
The import: TranslateModule is not overrided in the child module and always sends the string: ‘app’ not ‘sample-storage’, Need to know the reason and how to solve?
