Angular Academy · Lektion

Lokalisierte Bundles erstellen

Anwendungs-Builds pro Locale erzeugen

Lokalisierte Bundles erstellen ist eine kostenlose Angular Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Angular Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Ein Build pro Locale

Angulars i18n arbeitet zur Kompilierungszeit: Für jede Locale wird ein separates, vollständig optimiertes Bundle mit eingebauten Übersetzungen erzeugt. Benutzer laden nur ihre Sprache herunter, ohne Übersetzungskosten zur Laufzeit.

Lokalisierte Builds konfigurieren

Nachdem die Locales in angular.json deklariert wurden, setzen Sie localize: true in den Build-Optionen, um alle Locales auf einmal zu erzeugen.

"build": {
  "options": {
    "localize": true,
    "outputPath": "dist/app"
  }
}

Alle Locales erstellen

Führen Sie den Produktions-Build aus. Die CLI erzeugt einen Ordner pro Locale, der jeweils eine vollständige App enthält.

ng build --localize
# dist/app/en/  dist/app/fr/  dist/app/es/

Eine einzelne Locale erstellen

Für schnellere Iterationen können Sie nur eine einzelne Locale erstellen, indem Sie ihren Code übergeben.

ng build --localize=fr

Base href pro Locale festlegen

Jeder Locale-Build kann einen eigenen baseHref erhalten, sodass er über einen Unterpfad wie /fr/ bereitgestellt wird. Konfigurieren Sie dies für jede Locale in angular.json.

"locales": {
  "fr": {
    "translation": "src/locale/messages.fr.xlf",
    "baseHref": "/fr/"
  }
}

Eine bestimmte Locale in der Entwicklung bereitstellen

ng serve stellt jeweils eine Locale bereit. Übergeben Sie die gewünschte Konfiguration oder Locale, um Übersetzungen während der Entwicklung in einer Vorschau anzuzeigen.

ng serve --configuration=fr

Benutzer zu ihrer Locale weiterleiten

Da jede Locale ein separat bereitstellbarer Ordner ist, verwenden Sie normalerweise den Server oder ein CDN, um Benutzer anhand ihres Accept-Language-Headers oder über einen Sprachumschalter zum richtigen Unterpfad weiterzuleiten.

$localize zur Laufzeit für individuelle Setups

Fortgeschrittene Setups können Übersetzungen vor dem Bootstrap mit loadTranslations() aus @angular/localize zur Laufzeit laden. Dadurch entfällt der Build pro Locale, stattdessen gibt es ein einzelnes Bundle und eine geladene Übersetzungstabelle.

import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)

Polyfill-Anforderung

Die Verwendung von $localize erfordert das Polyfill @angular/localize. Fügen Sie es einmalig mit der CLI hinzu. Dadurch wird das für die Übersetzung von Tagged Templates benötigte globale Objekt registriert.

ng add @angular/localize

Bundle-Größe bleibt klein

Da die Übersetzung zur Build-Zeit erfolgt, enthält das französische Bundle ausschließlich französische Texte. Andere Sprachen und eine Übersetzungs-Engine werden nicht an den Browser ausgeliefert. Deshalb hält die Internationalisierung zur Compile-Zeit Apps schlank.

Ausgabe bereitstellen

Stellen Sie das gesamte Verzeichnis dist/app bereit. Jeder Locale-Unterordner ist eine eigenständige App. Konfigurieren Sie Ihren Host so, dass /fr/ den französischen Build ausliefert und die Standard-Locale am Root oder unter ihrem eigenen Pfad verfügbar ist.

Kurzer Test

Wie liefert Angular Übersetzungen aus?

Zusammenfassung

Setzen Sie localize: true und führen Sie ng build --localize aus, um pro Locale einen Ordner zu erzeugen, der jeweils eine vollständige App enthält. Verwenden Sie ein localespezifisches baseHref (z. B. /fr/), stellen Sie in der Entwicklung mit --configuration eine einzelne Locale bereit, fügen Sie das Polyfill @angular/localize hinzu und laden Sie Übersetzungen bei Bedarf zur Laufzeit für individuelle Setups.

Häufig gestellte Fragen

Ist die Lektion „Lokalisierte Bundles erstellen“ kostenlos?

Ja — der vollständige Text von „Lokalisierte Bundles erstellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Angular Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Angular Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Lokalisierte Bundles erstellen“?

Anwendungs-Builds pro Locale erzeugen Du übst Angular Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Angular Academy zu starten?

Keine Vorkenntnisse erforderlich. Angular Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Lokalisierte Bundles erstellen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Angular Academy-Lektion Code schreiben und ausführen?

Ja. Jede Angular Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Angular Academy