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. Los usuarios y los motores de búsqueda reciben entonces el HTML totalmente traducido a 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 utiliza el método translate en un solucionador de rutas para traducir el texto de la página. 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 }
  }
];

Añade withComponentInputBinding() a provideRouter para pasar las traducciones resueltas al componente de página como entrada.

El solucionador se ejecuta en tu servidor de compilación, por lo que se traduce con tu clave secreta. Configúrala como la variable de entorno MAGIC_TRANSLATE_SECRET_KEY en la que ejecutes ng build, por ejemplo, como secreto de CI. No lo pases a provideMagicTranslate, porque esa configuración también se ejecuta en el navegador.

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 solo el texto modificado cuenta para tu uso en versiones posteriores.