setActiveLang() re-executes all requests made

[LorenzoVaccher01]

I have a problem when I try to change the active language with this.translocoService.setActiveLang(lang);

What happens is: the language is changed but with the re-rendering of the page the requests that the user had previously made are made again. I don't understand this behavior!

I made some requests, changed the language (Transloco loaded the new language via the Loader and through a request I updated the language in the DB) and exactly the same requests were made before the language was changed.

When I comment this.translocoService.setActiveLang(lang); (see the code below) the problem does not occur. Anyone have any ideas on how to fix it?

Changing the language is managed by a component which, at the click of a button, performs these operations:

let generateMenuItemHtml = (lang: string, label: string) => {
  return {
    label: `<span class="flex align-items-center"><img src="/assets/flags/${lang}.png" width="22" alt="${lang} flag" draggable="false"><span class="ml-2">${label}</span></span>`,
    escape: false,
    disabled: this.translocoService.getActiveLang() == lang,
    command: (event: any) => {
      this.translocoService.setActiveLang(lang); // user clicked on a language button
      this.apiService.updateUserInfo({ lang: lang }).subscribe(response => {
        if (!response.success || response.error) {
          console.error(response);
          this.messageService.add({ severity: 'error', summary: translations[0], detail: translations[1] });
        }
      });
    }
  }
}

this.translocoService.langChanges$.subscribe(lang => {
  this.activeLang = lang;
  this.langOptions = [];
  // this is used to refresh active lang on menu dropdown
  for (let i = 0; i < LANGS.length; i++) {
    this.langOptions.push(generateMenuItemHtml(LANGS[i].code, LANGS[i].label))
  }
});

Source code of the transloco-root.module.ts file:

import {
  provideTransloco,
  TranslocoModule,
} from '@jsverse/transloco';
import { NgModule } from '@angular/core';
import { TranslocoHttpLoader } from './transloco-loader';
import { environment } from 'src/environments/environment';
import { provideTranslocoPersistLang } from '@jsverse/transloco-persist-lang';

@NgModule({
  exports: [ TranslocoModule ],
  providers: [
    provideTranslocoPersistLang({
      storage: {
        useValue: localStorage,
      },
      storageKey: 'lang'
    }),
    provideTransloco({
      config: {
        availableLangs: ['en', 'it'],
        defaultLang: 'en',
        fallbackLang: 'en',
        reRenderOnLangChange: true,
        prodMode: environment.production,
      },
      loader: TranslocoHttpLoader
    }),
  ],
})
export class TranslocoRootModule {}

Source code of the transloco-loader.ts file:

import { inject, Injectable } from "@angular/core";
import { Translation, TranslocoLoader } from "@jsverse/transloco";
import { HttpClient } from "@angular/common/http";

@Injectable({ providedIn: 'root' })
export class TranslocoHttpLoader implements TranslocoLoader {
    constructor(private http: HttpClient) { }

    getTranslation(lang: string) {
        return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
    }
}