Hello,
I replaced LeptonX Language switcher with a custom one.
typescript:
import { ConfigStateService, LanguageInfo, SessionStateService } from '@abp/ng.core';
import { Component, inject } from '@angular/core';
import { map, Observable } from 'rxjs';
@Component({
selector: 'app-language-selector',
templateUrl: './language-selector.component.html',
styleUrls: ['./language-selector.component.scss'],
standalone: false,
})
export class LanguageSelectorComponent {
private configState = inject(ConfigStateService);
private sessionState = inject(SessionStateService);
languages$: Observable<LanguageInfo[]> = this.configState.getDeep$('localization.languages');
get selectedLanguageName$(): Observable<string> {
return this.languages$.pipe(
map((languages) => {
const selectedLang = languages.find((lang) => lang.cultureName === this.selectedLangCulture());
return selectedLang ? selectedLang.displayName : '';
}),
);
}
get selectedLanguageShortName$(): Observable<string> {
return this.languages$.pipe(
map((languages) => {
const selectedLang = languages.find((lang) => lang.cultureName === this.selectedLangCulture());
return selectedLang ? selectedLang.twoLetterISOLanguageName : '';
}),
);
}
selectedLangCulture(): string {
return this.sessionState.getLanguage();
}
onChangeLang(cultureName: string) {
this.sessionState.setLanguage(cultureName);
}
}
template:
<div class="language-selector">
<div class="dropdown" ngbDropdown #languageDropdown="ngbDropdown" display="static">
<a
ngbDropdownToggle
autoClose="outside"
class="nav-link"
href="javascript:void(0)"
role="button"
id="dropdownMenuLink"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<span class="language-short">{{ selectedLanguageShortName$ | async }}</span>
<div class="language-long">
<i class="ri-global-line"></i>
<span>
{{ selectedLanguageName$ | async }}
</span>
</div>
</a>
<div
class="dropdown-menu dropdown-menu-right border-0 shadow-lg"
aria-labelledby="dropdownMenuLink"
[class.d-block]="languageDropdown.isOpen()">
<a
*ngFor="let lang of languages$ | async"
href="javascript:void(0)"
class="dropdown-item"
[class.active]="lang.cultureName === selectedLangCulture()"
(click)="onChangeLang(lang.cultureName)">
{{ lang?.displayName }}
</a>
</div>
</div>
</div>
Now after switching the language I get an error and the page is not being translated:
Though after refreshing the page, the selected language is allplied.
What shall I do to make it work?
8 Answer(s)
-
0
The error you are seeing (
Cannot read properties of undefined (reading 'then')at_LocalizationService.registerLocale) occurs because the ABP Angular localization system expects a full page reload when changing the language. The built-in language switcher in LeptonX and ABP Angular triggers a hard reload after setting the language, ensuring all localization resources are reloaded and registered.In your custom
onChangeLangmethod, you are only callingthis.sessionState.setLanguage(cultureName);which updates the language in the session, but does not reload the page. As a result, the localization service tries to register the new locale without the necessary resources, causing the error.To fix this, after setting the language, you should force a full page reload:
onChangeLang(cultureName: string) { this.sessionState.setLanguage(cultureName); location.reload(); }This matches the behavior of the default ABP/LeptonX language switcher and ensures the new language is fully applied without errors.
For more details, see the official documentation:
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
-
0
I've managed to get rid of the error by adding the
provideAbpCore( withOptions({ environment, registerLocaleFn: registerLocale( { cultureNameLocaleFileMap: { 'nl-NL': 'nl' }, errorHandlerFn: ({ resolve, reject, locale, error }) => { // the error can be handled here }, }, ), }), ),but still to see the new language applied I have to refresh the page
window.location.reload();is it possible to reload page data without reloading the whole page by using abp methods?
-
0
Hello, Thank you for providing detailed information and related updates regarding your problem. I have simply replaced the Toolbar component just to demonstrate the issue on my side. However, I was unable to produce it.
May I ask how exactly you have used the component on your side? Thank you for your cooperation.
-
0
Hi sumeyye.kurtulus, Thank you for your response.
We don't use LeptonX or Lepton theme. Though the language is applied only when you force refreshing the page by
window.location.reload();In LeptonX the language is applied without refreshing the page completely. How can I apply the same behaviour without using LeptonX?
-
0
Thank you for sharing the additional details. Unfortunately, I am unable to determine how the theme has been integrated into your project based on the information provided.
To help us investigate further, could you please send a minimal, reproducible example?
You may send it directly to me at sumeyye.kurtulus@volosoft.com.In the meantime, you can also review the source code for the LeptonX theme.
The source can be obtained using Suite, as explained here: ABP Suite Source Code Documentation.Alternatively, you can add the theme package with source code under your Angular directory using the following command:
abp add-package @volosoft/abp.ng.theme.lepton-x --with-source-codePlease let us know if you need any further assistance. We will be glad to help.
Thank you for your cooperation.
-
0
Thank you for the response.
To simplify the question, is it possible to reload the page in ABP Angular without using the code
window.location.reload();?
-
0
Hello again, You can use the
reloadPagedeclared inAbpWindowServicehttps://github.com/abpframework/abp/blob/93da49c17aa61883733f0abcff19ba45b6c3d633/npm/ng-packs/packages/core/src/lib/services/window.service.ts#L18 to reload the page. However, it does the same thing at the end. -
0
Thank you for trying to help. Closing the ticket.
