Transloco Language Switch Works but Pipe Doesn't Update URL in Angular

I'm using the @jsverse/transloco library in my Angular application to manage language translation. When I switch languages using a button, the translations are updated correctly in the template (for example, "en title" becomes "es title"). However, the link in my template doesn't change accordingly.

The link is constructed using a custom lang pipe that attaches the current language to the URL. Below is the code for my LangPipe and the switchLang method:

import { Component, inject, Injectable, isDevMode, Pipe } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
provideTransloco,
Translation,
TranslocoLoader,
TranslocoModule,
TranslocoService,
} from '@jsverse/transloco';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { CommonModule } from '@angular/common';
import { provideRouter, RouterModule } from '@angular/router';

console.clear();

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

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

@Pipe({
name: 'lang',
})
export class LangPipe {
transloco = inject(TranslocoService);

transform(value: string) {
console.log({ value });
return `${this.transloco.getActiveLang()}/${value}`.replace(/\/\//g, '/');
}
}

@Component({
selector: 'app-root',
imports: [TranslocoModule, CommonModule, LangPipe],
template: `
in app!
<ng-container *transloco="let t">
<p>{{ t('title') }}</p>

<button (click)="switchLang()">switch lang</button>
<a [href]="'/products/1' | lang">goto to some link</a>
</ng-container>
`,
})
export class App {
name = 'Angular';
transloco = inject(TranslocoService);

switchLang() {
if (this.transloco.getActiveLang() === 'en') {
this.transloco.setActiveLang('es');
} else {
this.transloco.setActiveLang('en');
}
}
}

bootstrapApplication(App, {
providers: [
provideHttpClient(),
provideTransloco({
config: {
availableLangs: ['en', 'es'],
defaultLang: 'en',
reRenderOnLangChange: true,
prodMode: !isDevMode(),
},
loader: TranslocoHttpLoader,
}),
],
});

• The language is switching successfully in the template (en becomes es), but the URL (generated by the lang pipe) does not update with the new language.
• The pipe transforms the URL as expected, but it doesn’t seem to react to the language change when it's triggered by the switchLang method.

What I’ve tried:

• I've verified that the language changes correctly with the transloco.getActiveLang() method.
• I've also checked the lang pipe, and it correctly transforms the link based on the active language, but it does not update dynamically when the language is switched.

If Transloco has a better built-in way to handle this scenario and update the URL correctly based on the active language, I would happily use that approach instead of the custom pipe.

How can I ensure that the URL updates correctly when the language is switched?

stackblitz demo

Continue reading...