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. Der HTML-Code wird dann übersetzt, bevor er gesendet wird, Benutzer warten nie auf eine Übersetzung und Suchmaschinen indexieren jede 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 übersetze die Texte der Seite in einem Routenauflöser mit der Methode translate. Speichere das Ergebnis in Angular's TransferState, sodass 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 }
  }
];

Mit withComponentInputBinding() in provideRouter kommen die aufgelösten Übersetzungen als Eingabe der Seitenkomponente an.

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 spätere Builds nur für Text zahlen, der sich geändert hat.