Prérendu

Le composant <t> et le t pipe se traduisent dans le navigateur. Si tu prévisualises ton application Angular, tu peux traduire tes pages au moment de la création. Les utilisateurs et les moteurs de recherche reçoivent alors du code HTML entièrement traduit dans toutes les langues.

L'exemple de projet préaffiche une page par langue. Ouvre la page allemande et inspecte le trafic réseau : aucune demande n'est faite à l'API Magic Translate.

Traduire dans un résolveur

Ajoute un paramètre d'itinéraire pour la langue et utilise la méthode translate dans un résolveur d'itinéraires pour traduire le texte de la page. Mémorise le résultat dans le TransferState de Angular afin que le navigateur le réutilise au lieu de le traduire à nouveau une fois hydratée.

import { inject, makeStateKey, TransferState } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { MagicTranslate, type Languages } from '@magic-translate/angular';

const texts = {
  title: 'Welcome to our shop',
  intro: 'This page was translated when the app was built.'
};

type Texts = Record<keyof typeof texts, string>;

export const translationsResolver: ResolveFn<Texts> = async (route) => {
  const transferState = inject(TransferState);
  const magicTranslate = inject(MagicTranslate);
  const lang = (route.paramMap.get('language') ?? 'en') as Languages;
  const key = makeStateKey<Texts>(`translations-${lang}`);

  const transferred = transferState.get(key, null);
  if (transferred) return transferred;

  const entries = await Promise.all(
    Object.entries(texts).map(async ([name, text]) => [
      name,
      await magicTranslate.translate(text, { lang })
    ])
  );
  const translations = Object.fromEntries(entries) as Texts;
  transferState.set(key, translations);
  return translations;
};

// app.routes.ts
export const routes: Routes = [
  {
    path: ':language',
    component: Page,
    resolve: { translations: translationsResolver }
  }
];

Ajoute withComponentInputBinding() à provideRouter pour transmettre les traductions résolues au composant page en tant qu'entrée.

Le résolveur s'exécute sur ton serveur de build, il est donc traduit par ta clé secrète. Définis-la comme variable d'environnement MAGIC_TRANSLATE_SECRET_KEY dans laquelle tu exécutes ng build, par exemple en tant que secret CI. Ne le transmets pas à provideMagicTranslate, car cette configuration s'exécute également dans le navigateur.

Prérendu dans toutes les langues

Indique à Angular les langues à prédiffuser avec getPrerenderParams :

// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';

export const serverRoutes: ServerRoute[] = [
  {
    path: ':language',
    renderMode: RenderMode.Prerender,
    getPrerenderParams: async () =>
      ['en', 'de', 'zh'].map((language) => ({ language }))
  }
];

ng build écrit désormais un fichier HTML traduit par langue. Les traductions sont mises en cache, donc seul le texte modifié est pris en compte pour ton utilisation dans les versions ultérieures.