In my work with Angular 7, I have two files named arservice.json and enservice.json. These files are used in the code snippet below from app.module.ts:
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
{... more dependencies ...}
@NgModule({
declarations: [
AppComponent,
NotFoundComponent
],
imports: [
BrowserModule,
HttpClientModule,
{... more modules ...}
],
providers: [
{ provide: LOCALE_ID, useValue: 'ar-AR' },
{... more interceptors ...},
AppSettings
],
bootstrap: [AppComponent]
})
export class AppModule {
}
In the HTML component, the translation label is shown using the following code:
{{ translate.instant('serviceApp.mainMenu.main')}}The issue arises when calling location.reload();, as sometimes the label appears in Arabic while other times it's displayed in English format or even shows the message serviceApp.mainMenu.main.
To address this problem, additional code was added in the constructor of the component for loading translation and setting the default language:
constructor(
public translate: TranslateService, location: Location,
private boot: BootstrapConfigService, private injector: Injector
, private CheckLanguageService: CheckLanguageService) {
{... initialization ... }
}
The related service files include:
check-language-service.ts
import { Injectable } from '@angular/core';
{... service implementation ...}
bootstrap-config.service.ts
import { Injectable } from '@angular/core';
{... service implementation ...}