Prerendering

Il componente <t> e il t pipe si traducono nel browser. Se effettui il prerendering della tua app Angular, puoi invece tradurre le tue pagine in fase di compilazione. L'HTML viene poi tradotto prima di essere inviato, gli utenti non aspettano mai una traduzione e i motori di ricerca indicizzano ogni lingua.

Il progetto di esempio esegue il prerendering di una pagina per lingua. Apri la pagina in tedesco e controlla il traffico di rete: non viene effettuata alcuna richiesta all'API Magic Translate.

Traduci in un resolver

Aggiungi un parametro route per la lingua e traduci i testi della pagina in un route resolver con il metodo translate. Memorizza il risultato nel TransferState di Angular, in modo che il browser lo riutilizzi invece di tradurlo nuovamente dopo l'idratazione.

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 }
  }
];

Con withComponentInputBinding() in provideRouter, le traduzioni risolte arrivano come input del componente della pagina.

Prerenderizza tutte le lingue

Indica a Angular in quali lingue eseguire il prerendering con 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 ora scrive un file HTML tradotto per lingua. Le traduzioni vengono memorizzate nella cache, quindi le build successive pagano solo il testo modificato.