I Have a problem in using abpLocaliztion pipe,

I created a service responsible for the localization which use “SessionStateService”

import { SessionStateService } from '@abp/ng.core';

  setLanguage(newLanguage: Language) {
    this.sessionStateService.setLanguage(newLanguage.code);

    this.updateLanguageState({
      ...this.languageState.getValue(),
      language: newLanguage,
    });
  }

and here is my configuration in app-module:

@NgModule({
  imports: [
    CoreModule.forRoot({
      environment,
      registerLocaleFn: registerLocale(),
    }),
  ],
})

here is the login component which i need to translate :

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    LoginRoutingModule,
    ReactiveFormsModule,
    CoreModule.forChild({
      localizations: [
        { culture: 'en', resources: [{ resourceName: 'Login', texts: en }] },
        { culture: 'ar', resources: [{ resourceName: 'Login', texts: ar }] },
      ],
    }),
    AccountModule,
    MatInputModule,
    MatFormFieldModule,
    MatCheckboxModule,
    MatIconModule,
    MatButtonModule,
  ],
})
export class LoginModule {}

and here is the HTML :

  <form class="form-body" [formGroup]="loginForm" (ngSubmit)="login()">
     <div class="bg-white border-radius box-shadow pt-20 ps-20 pe-20">
        <div class="mb-25">
           <h1 class="font-header-lg">
                {{ "Login::PageTitle" | abpLocalization }}
           </h1>
           <p class="font-body-lg">
                {{ "Login::PageTagline" | abpLocalization }}
           </p>
         </div>

            <!-- email control -->
            <div class="tagus-form-group without-icon">
              <mat-form-field appearance="outline">
                <mat-label>
                  {{ "Login::EmailAddress" | abpLocalization }}
                </mat-label>
                <input matInput formControlName="username" />
                @if (loginForm.controls['username'].hasError('required')) {
                <mat-error>
                  {{ "Login::EmailOrUsernameIs" | abpLocalization }}
                  <strong>{{
                    "Login::EmailRequired" | abpLocalization
                  }}</strong>
                </mat-error>
                }
              </mat-form-field>
            </div>

            <!-- password control -->
            <div class="tagus-form-group without-icon">
              <mat-form-field appearance="outline">
                <mat-label>
                  {{ "Login::Password" | abpLocalization }}
                </mat-label>
                <input
                  matInput
                  [type]="isPasswordHidden ? 'password' : 'text'"
                  formControlName="password"
                />

                <button
                  type="button"
                  mat-icon-button
                  matSuffix
                  [attr.aria-label]="'Login::ShowPassword' | abpLocalization"
                  [attr.aria-pressed]="isPasswordHidden"
                  (click)="isPasswordHidden = !isPasswordHidden"
                >
                  <mat-icon>
                    {{ isPasswordHidden ? "visibility_off" : "visibility" }}
                  </mat-icon>
                </button>
                @if (loginForm.controls['password'].hasError('required')) {
                <mat-error>
                  {{ "Login::PasswordIs" | abpLocalization }}
                  <strong>{{
                    "Login::PasswordRequired" | abpLocalization
                  }}</strong>
                </mat-error>
                }
              </mat-form-field>
            </div>
          </div>

          <!-- remember me & forgot password -->
          <div
            class="remember-and-forgot-password d-flex align-items-center justify-content-space-between gap-2 mt-15"
          >
            <mat-checkbox
              class="remember-me-checkbox font-body-lg"
              formControlName="rememberMe"
            >
              {{ "Login::RememberMe" | abpLocalization }}
            </mat-checkbox>
            <a
              routerLink="/account/forgot-password"
              class="forgot-password-link d-inline-block main-color font-link-lg"
            >
              {{ "Login::ForgotYourPassword" | abpLocalization }}
            </a>
          </div>

          <!-- submit button -->
          <button
            class="tagus font-button-lg text-center w-100 mt-20"
            type="submit"
            mat-flat-button
            [disabled]="loginForm.invalid"
          >
            {{ "Login::Login" | abpLocalization }}
          </button>
        </form>

I created a local translations files :
i18n:

which has JSON files for both of the languages

-I succeeded in calling abp localization endpoint :
and the response after changing the language is returns successfully

-whether im using the local translation or the abp api translation

it doesn’t reflect on the UI, only reflects if i refreshed the app