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. Gli utenti e i motori di ricerca ricevono quindi il codice HTML completamente tradotto in tutte le lingue.

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 usa il metodo translate in un route resolver per tradurre il testo della pagina. 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 }
  }
];

Aggiungi withComponentInputBinding() a provideRouter per passare le traduzioni risolte al componente della pagina come input.

Il resolver viene eseguito sul tuo server di compilazione, quindi si traduce con la tua chiave segreta. Impostala come variabile di ambiente MAGIC_TRANSLATE_SECRET_KEY su cui esegui ng build, ad esempio come segreto CI. Non passarlo a provideMagicTranslate, perché quella configurazione funziona anche nel browser.

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 sono memorizzate nella cache, quindi solo il testo modificato viene conteggiato ai fini del tuo utilizzo nelle build successive.