Angular - Translation not working on refresh

[cloud0259]

Is there an existing issue for this?

• I have searched the existing issues

Description

Hello,
There's a problem with reading translations when a page is reloaded in an Angular application.

Specifically, using localizationService.instant doesn't work.

I saw that tickets have been opened and no solution has been provided yet.
I looked into it and found something. I don't know if it's the best solution, but it works.

Reproduction Steps

No response

Expected behavior

The translation should appear upon reloading.

Actual behavior

The translation is not happening

Regression?

No response

Known Workarounds

What I propose is to add this to the app.config.ts file

 provideAppInitializer(() => {
      const configState = inject(ConfigStateService);
      return firstValueFrom(configState.getAll$()
             .pipe(filter((values) => !!values && object.keys(values).length > 0)));
    }),  

Version

10

User Interface

Angular

Database Provider

EF Core (Default)

Tiered or separate authentication server

None (Default)

Operation System

Windows (Default)

Other information

No response

[sumeyyeKurtulus]

Hello @cloud0259 I cannot produce the same problem with such basic configuration in the app component

export class AppComponent {
  private localizationService = inject(LocalizationService);

  constructor() {
    const save = this.localizationService.instant('AbpUi::Save');
    console.log('🚀 ~ AppComponent ~ constructor ~ save:', save);
  }
}

Screen.Recording.2026-01-15.at.08.45.31.mov

Could you specify extra details about your application such as your theme or any other customization that may affect this part?

[cloud0259]

Thanks for your reply @sumeyyeKurtulus

I'm using the basic theme with the source code in the application and Primeng.
It's possible that something is missing from the theme configuration on my project.

import { ModuleWithProviders, NgModule } from '@angular/core';
import {
  AccountLayoutComponent,
  AuthWrapperComponent,
  ApplicationLayoutComponent,
  EmptyLayoutComponent,
  CurrentUserComponent,
  NavItemsComponent,
  PageAlertContainerComponent,
  RoutesComponent,
  ValidationErrorComponent,
} from './components';
import { provideThemeBasicConfig } from './providers';
import { SideNavigationComponent } from './components/application-layout/side-navigation/side-navigation.component';

export const LAYOUTS = [ApplicationLayoutComponent, AccountLayoutComponent, EmptyLayoutComponent];

export const THEME_BASIC_COMPONENTS = [
  ...LAYOUTS,
  ValidationErrorComponent,
  NavItemsComponent,
  RoutesComponent,
  CurrentUserComponent,
  PageAlertContainerComponent,
  AuthWrapperComponent,
  SideNavigationComponent,
];

@NgModule({
  declarations: [],
  exports: [...THEME_BASIC_COMPONENTS],
  imports: [...THEME_BASIC_COMPONENTS],
})
export class BaseThemeBasicModule { }

@NgModule({
  exports: [BaseThemeBasicModule],
  imports: [BaseThemeBasicModule],
})
export class ThemeBasicModule {
  /**
   * @deprecated forRoot method is deprecated, use `provideThemeBasicConfig` *function* for config settings.
   */
  static forRoot(): ModuleWithProviders<ThemeBasicModule> {
    return {
      ngModule: ThemeBasicModule,
      providers: [provideThemeBasicConfig()],
    };
  }
}

[sumeyyeKurtulus]

Thank you for providing extra details. We have discovered this race condition problem in the previous version and fixed it here #23408.

However, if you think that this fix did not suit your case and you need some sort of an async localization pipe, you can check this https://github.com/abpframework/abp/blob/rel-10.0/npm/ng-packs/packages/core/src/lib/pipes/lazy-localization.pipe.ts

[cloud0259]

I'm using primeNg's tableOptions, so I have no choice but to use the service in the .ts file to populate a column's header.

Therefore, I can't use the pipe.
With this code, the translation works, but I see a latency. The text displays the translation key first and then the translation.

Enregistrement.de.l.ecran.2026-01-15.103844.mp4

export class HomeComponent {
  localizationService = inject(LocalizationService);

  text: Signal<string> = toSignal(this.localizationService.get('AbpAccount::Login'));
}

Edit:

export class HomeComponent {
  localizationService = inject(LocalizationService);
  text: string ;
  constructor() {
    this.text =  this.localizationService.instant('AbpAccount::Login');

  }

Using no signal, it works here.

But I notice that even the application name doesn't appear correctly in the browser tab.

[sumeyyeKurtulus]

Thank you for sharing details, I see your problem. However, I cannot produce the same problem even with the signal call. I am sharing my sample project that may be useful https://drive.google.com/file/d/1oG_yHcT5zMS1qR7FVQttmcpuDC9A4Tz9/view?usp=sharing

But I notice that even the application name doesn't appear correctly in the browser tab.

If you mean the title strategy, I could not replicate the same localization issue here either.