Magic Translate vs. Angular i18n

Angular アプリは通常、Angular の組み込みi18n、ngx-translate、Transloco の3つのツールのいずれかで翻訳される。アプリをリリースする前に、3つすべてを各言語に翻訳する必要がある。Magic Translate は、翻訳ファイルなしで、テンプレート内のテキストを直接翻訳する。

一目で

	Magic Translate	Angular i18n	ngx-translate と Transloco
テキストの書き方	`<t>` や `t` pipe のあなたの言葉	`i18n` と記されたあなた自身の言葉	各メッセージのキー
翻訳	AI翻訳、自動的に作成された	XLIFF ファイルに抽出して、あなたが翻訳した	あなたが書いた、言語ごとのJSONファイル
言語を切り替える	実行時に	言語ごとに1つのビルド	実行時に
サーバーレンダリング	はい、ビルド時にプリレンダリングで翻訳された	はい	はい、追加設定で
価格	無料プラン、そして使用量に応じた月額プラン	無料、Angular の一部	オープンソースで無料

コードの違い

Angular の組み込みi18nでは、テキストにマークを付けて抽出し、抽出したファイルをすべての言語に翻訳する。

<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

ngx-translate または Transloco では、各メッセージにはキーがあり、その翻訳はJSONファイルにある。

<!-- ngx-translate -->
<h2>{{ 'cart.title' | translate }}</h2>

<!-- Transloco -->
<h2>{{ 'cart.title' | transloco }}</h2>

Magic Translate では、テキストを書いてアプリをリリースする:

<h2><t>Your shopping cart</t></h2>
<input [placeholder]="'Search products' | t" />

Magic Translate を選ぶタイミング

ファイルを抽出、翻訳、ロードせずに、Angular アプリを多くの言語で利用したい。
アプリをリロードしたり、言語ごとに一度ビルドしたりすることなく、ユーザーに言語を切り替えてもらいたい。
テキストは頻繁に変わるし、すべての言語を最新の状態に保ちたい。

Angular i18n、ngx-translate、Transloco をいつ選ぶべきか

すべてのテキストは、人が翻訳またはレビューする必要がある。
各言語の複数形や文言を正確にコントロールする必要がある。
外部サービスのない無料のソリューションが欲しい。

Magic Translate に移動

一度に1つのコンポーネントを切り替えることができる。キーまたは i18n 属性を <t> の英語のテキストに置き換えるか、属性には t pipe を使う。Angular ガイドはセットアップを示している。

試す準備はできた？入門ガイドに従って、最初のコンポーネントを5分で翻訳する。