Magic Translate vs. Angular i18n
Angular Apps werden normalerweise mit einem von drei Tools übersetzt: dem integrierten i18n von Angular, ngx-translate oder Transloco. Alle drei erfordern Übersetzungen für jede Sprache, bevor du deine App veröffentlichst. Magic Translate übersetzt den Text in deinen Vorlagen direkt, ohne Übersetzungsdateien.
Auf einen Blick
| Magic Translate | Angular i18n | ngx-translate und Transloco | |
|---|---|---|---|
| Wie schreibst du Text | Deine eigenen Worte, in <t> oder t pipe | Deine eigenen Worte, markiert mit i18n | Ein Schlüssel für jede Nachricht |
| Übersetzungen | KI-Übersetzung, automatisch erstellt | In XLIFF-Dateien extrahiert und von dir übersetzt | JSON-Dateien pro Sprache, von dir geschrieben |
| Sprache wechseln | Zur Laufzeit | Ein Build pro Sprache | Zur Laufzeit |
| Server-Rendern | Ja, bei der Erstellung mit Prerendering übersetzt | Ja | Ja, mit zusätzlichen Einstellungen |
| Preis | Kostenloses Abo, dann monatliche Tarife je nach Nutzung | Kostenlos, Teil von Angular | Open Source und kostenlos |
Wie sich der Code unterscheidet
Mit dem integrierten i18n von Angular markierst du den Text, extrahierst ihn und übersetzt die entpackte Datei für jede Sprache:
<h2 i18n>Your shopping cart</h2>
ng extract-i18n# then translate messages.xlf into messages.de.xlf, messages.fr.xlf, …# and build the app once per language
Mit ngx-translate oder Transloco hat jede Nachricht einen Schlüssel und ihre Übersetzungen sind in JSON-Dateien gespeichert:
<!-- ngx-translate --><h2>{{ 'cart.title' | translate }}</h2><!-- Transloco --><h2>{{ 'cart.title' | transloco }}</h2>
Mit Magic Translate schreibst du den Text und veröffentlichst deine App:
<h2><t>Your shopping cart</t></h2><input [placeholder]="'Search products' | t" />
Wann wähle ich Magic Translate
- Du willst deine Angular-App in vielen Sprachen, ohne Dateien zu extrahieren, zu übersetzen und zu laden.
- Du möchtest, dass Nutzer die Sprache wechseln, ohne die App neu zu laden oder sie einmal pro Sprache zu erstellen.
- Dein Text ändert sich oft und du möchtest, dass jede Sprache auf dem neuesten Stand bleibt.
Wann wähle ich Angular i18n, ngx-translate oder Transloco
- Der gesamte Text muss von einer Person übersetzt oder überprüft werden.
- Du brauchst eine genaue Kontrolle über Pluralformen und Formulierungen in jeder Sprache.
- Du willst eine kostenlose Lösung ohne externen Service.
Umzug nach Magic Translate
Du kannst eine Komponente nach der anderen wechseln. Ersetze den Schlüssel oder das i18n-Attribut durch den englischen Text in <t> oder verwende t pipe für Attribute. Die Anleitung Angular zeigt die Einrichtung.
Bereit, es zu versuchen? Folge der Anleitung für die ersten Schritte, um deine erste Komponente in fünf Minuten zu übersetzen.