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. Le code HTML est ensuite traduit avant d'être envoyé, les utilisateurs n'attendent jamais de traduction et les moteurs de recherche indexent 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 traduis les textes de la page dans un résolveur d'itinéraires avec la méthode translate. 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 }
  }
];

Avec withComponentInputBinding() dans provideRouter, les traductions résolues arrivent en entrée dans le composant de la page.

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 les versions ultérieures ne payent que pour le texte modifié.