Angular v20 : Ajouter facilement une gestion multilingue avec Transloco

La gestion multilingue est un besoin fréquent dans les applications professionnelles. Avec Transloco, vous bénéficiez d’une solution robuste, modulaire et maintenue pour ajouter l’internationalisation (i18n) dans votre app Angular.

Voici comment la mettre en place proprement dans un projet Angular v20, compatible avec une architecture moderne.

1. 🫡 Avant de commencer

Il convient de dire que le package a été renommé récemment. On est passé de @ngneat/transloco à @jsverse/transloco. Le premier est compatible jusqu'aux versions strictement inférieures à la v16. C'est pour cela qu'ici, nous ne parlerons que du second.

2. 📦 Installation de Transloco

Dans ton terminal

Dans un projet Angular :

ng add @jsverse/transloco

ou dans un projet Nx :

pnpm add @jsverse/transloco
# Standalone project
nx g @jsverse/transloco:ng-add
# Integrated monorepo workspace
nx g @jsverse/transloco:ng-add --project=my-app

Il faudra alors répondre à quelques questions :

• acceptes-tu d'installer le package → Y
• de quels langues as-tu besoin ? → en, fr par exemple
• fais-tu du SSR ? → à toi de voir

Arrivé ici, tu as 4 nouveaux fichiers et un modifié :

• + transloco.config.ts
• + src/app/transloco-loader.ts
• + src/assets/i18n/en.json
• + src/assets/i18n/fr.json
• ~ src/app/app.config.ts

Il est possible que l'installation ne soit pas complète. Vérifie que le package @jsverse/transloco-utils est bien installé, sinon rajoute le :

pnpm add @jsverse/transloco-utils

transloco.config.ts

import { TranslocoGlobalConfig } from '@jsverse/transloco-utils';

const config: TranslocoGlobalConfig = {
  rootTranslationsPath: 'src/assets/i18n/',
  langs: ['en', 'fr'],
  keysManager: {}
};

export default config;

Tu dois y retrouver les langues que tu as saisies avant.

transloco-loader.ts

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

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

C'est la méthode qui se charge de récupérer tes fichiers de traduction en fonction de la langue courante.

{en,fr}.json

{}

Deux fichiers pour l'instant vide que tu vas compléter au fur et à mesure que ton application grandie.

app.config.ts

export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    // 👇🏼
    provideTransloco({
      config: {
        availableLangs: ['en', 'fr'],
        defaultLang: 'en', // 👈🏼 mets 'fr' si tu veux français par défaut
        reRenderOnLangChange: true,
        prodMode: !isDevMode(),
      },
      // le loader généré dans `transloco-loader.ts`
      loader: TranslocoHttpLoader
    })
  ]
};

3. 📁 Comment organiser ses fichiers de traductions

J'ai longtemps eu du mal à trouver une bonne organisation. Aka, facile à maintenir, zéro redondance. Ce que je prône maintenant, c'est un fonctionnement par page.

Chaque clé de premier niveau correspond à une page. Ensuite on peut avoir autant de sous-niveau que de sections / blocs au besoin.

Oui, on risque d'avoir de la redondance de wordings. Mais il s'avère que c'est comme le code, DRY c'est souvent dangereux.

On peut envisager de centraliser quelques éléments comme les actions par exemple : "Annuler", "Enregister", " Confirmer" ...

Mais attention, cela peut vite se transformer en coupe-gorge.

Exemple fr.json :

{
  "dashboard": {
    "bloc-1": {},
    "bloc-2": {}
  },
  "home": {
    "description": "Apprends Angular étape par étape",
    "title": "Bienvenue sur EasyAngularKit"
  }
}

Mon second conseil, c'est de trier alphabétiquement les éléments. Sur le long terme ça aide à s'y retrouver plus vite pour savoir si une clé existe déjà ou quelque chose de similaire.

4. 🧩 Utilisation dans les composants standalone

Dans un composant :

import { Component } from '@angular/core';
import { TranslocoDirective, TranslocoPipe } from '@jsverse/transloco';

@Component({
  imports: [TranslocoPipe, TranslocoDirective],
  template: `
    <h1>{{ 'home.title' | transloco }}</h1>
    <p *transloco="let t; prefix: 'home'">{{ 'description' | transloco }}</p>
  `,
})
export class HomePage {
}

Ici, je te présente deux syntaxes possibles :

• via le pipe TranslocoPipe
• via la directive TranslocoDirective avec ici en plus une démo de comment préciser un suffix pour ne pas avoir à le répéter.

5. 🌐 Changer de langue dynamiquement

Utilise TranslocoService :

import { TranslocoService } from '@jsverse/transloco';

class App {
  private translocoService: TranslocoService = inject(TranslocoService);

  switchLang(lang: 'fr' | 'en') {
    this.translocoService.setActiveLang(lang);
  }
}

Conclusion

Transloco s'intègre parfaitement à Angular v20 avec une approche zoneless, standalone, et type-safe si on pousse plus loin. C’est un excellent choix pour internationaliser ton projet proprement, sans sacrifier la maintenabilité.

🔗 Documentation officielle

➡️ Pour aller plus loin sur les bonnes pratiques Angular : EasyAngularKit.com