Prerenderización

El componente <t> y el t pipe se traducen en el navegador. Si prerenderizas tu aplicación Angular, puedes traducir tus páginas en el momento de la creación. Luego, el HTML se traduce antes de enviarse, los usuarios nunca esperan a que se traduzca y los motores de búsqueda indexan todos los idiomas.

El proyecto de ejemplo prerenderiza una página por idioma. Abre la página en alemán e inspecciona el tráfico de la red: no se hace ninguna solicitud a la API Magic Translate.

Traducir en un solucionador

Añade un parámetro de ruta para el idioma y traduce los textos de la página en un solucionador de rutas con el método translate. Guarda el resultado en TransferState de Angular para que el navegador lo reutilice en lugar de volver a traducirlo tras la hidratación.

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() en provideRouter, las traducciones resueltas llegan como entrada del componente de página.

Prerenderizar todos los idiomas

Dile a Angular qué idiomas debe renderizar previamente 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 escribe ahora un archivo HTML traducido por idioma. Las traducciones están en caché, por lo que las versiones posteriores solo pagan por el texto que ha cambiado.