Vorrendern

Die <t>-Komponente und t pipe werden im Browser übersetzt. Wenn du deine Angular-App vorrenderst, kannst du deine Seiten stattdessen zur Build-Zeit übersetzen. Nutzer und Suchmaschinen erhalten dann vollständig übersetztes HTML in jeder Sprache.

Das Beispielprojekt rendert eine Seite pro Sprache im Voraus. Öffne die deutsche Seite und überprüfe den Netzwerkverkehr: Es wird keine Anfrage an die Magic Translate-API gestellt.

Übersetze in einem Resolver

Füge einen Routenparameter für die Sprache hinzu und verwende die Methode translate in einem Routenauflöser, um den Text der Seite zu übersetzen. Speichere das Ergebnis in Angular's TransferState, damit der Browser es wiederverwendet, anstatt es nach der Flüssigkeitszufuhr erneut zu übersetzen.

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

Füge withComponentInputBinding() zu provideRouter hinzu, um die aufgelösten Übersetzungen als Eingabe an die Seitenkomponente zu übergeben.

Der Resolver läuft auf deinem Build-Server, also übersetzt er mit deinem geheimen Schlüssel. Setze es als Umgebungsvariable MAGIC_TRANSLATE_SECRET_KEY ein, in der du ng build ausführst, zum Beispiel als CI-Secret. Gib es nicht an provideMagicTranslate weiter, weil diese Konfiguration auch im Browser läuft.

Jede Sprache vorab rendern

Sag Angular, welche Sprachen mit getPrerenderParams vorgerendert werden sollen:

// 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 schreibt jetzt eine übersetzte HTML-Datei pro Sprache. Die Übersetzungen werden zwischengespeichert, sodass nur geänderter Text für deine Verwendung in späteren Builds angerechnet wird.