Internationalization with @angular/localize

<h1 i18n>Hello</h1>

Error: It looks like your application or one of its dependencies is using i18n.Angular 9 introduced a global `$localize()` function that needs to be loaded.Please run `ng add @angular/localize` from the Angular CLI.(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.For server-side rendering applications add the import to your `main.server.ts` file.)

{ "projects": { "ponyracer": { "projectType": "application", // ... "i18n": { "locales": { "fr": "src/locale/messages.fr.xlf", "es": "src/locale/messages.es.xlf", } }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", // ... "configurations": { "production": { // ... }, "fr": { "localize": }, "es": { "localize": } } }, "serve": { // ... "configurations": { "production": { // ... }, "fr": { "browserTarget": "ponyracer:build:fr" }, "es": { "browserTarget": "ponyracer:build:es" } } } // ...}

ng serve --configuration=fr

const person1 = 'Cedric';const person2 = 'Agnes';const template = `Hello ${person1}! Where is ${person2}?`;

const uppercaseNames = (strings, ...values) => { // `strings` is an array with the static parts // `values` is an array with the evaluated expressions const names = values.map(name => name.toUpperCase()); // `names` now has // let's merge the `strings` and `names` arrays return strings.map((string, i) => `${string}${names ? names : ''}`).join('');};const result = uppercaseNames`Hello ${person1}! Where is ${person2}?`;// returns 'Hello CEDRIC! Where is AGNES?'

<trans-unit> <source>You have 10 users</source> <target>Vous avez 10 utilisateurs</target></trans-unit>

私の HomeComponent のテンプレートには、Vous avez 10 utilisateurs と表示されていました!

テンプレート文字列の中に何らかの動的な式がある場合はどうなるでしょうか。

title = $localize`Hi ${this.name}! You have ${this.users.length} users.`;

式は自動的に PH および PH_1 (PH はプレースホルダ) という名前になります。

<trans-unit> <source>Hi <x/>! You have <x/> users.</source> <target>Bonjour <x/>&nbsp;! Vous avez <x/> utilisateurs.</target></trans-unit>

しかし、最良の方法は、式に意味のあるプレースホルダー名を自分で付けることで、${expression}:placeholder: 構文を使用することによってそれを行うことができます。

title = $localize`Hi ${this.name}:name:! You have ${this.users.length}:userCount: users.`;

それから、翻訳内の好きな場所でこのプレースホルダーを使用することができます。

<h1 i18n="@@home.greetings">Hello</h1>

すると、翻訳は次のようになります:

<trans-unit> <source>Hello</source> <target>Bonjour</target></trans-unit>

これは明らかに使いやすいと思います。

コード内の翻訳ではどうでしょうか。$localize では、ID を指定する構文も理解できます。

テンプレートの構文と同様に、翻訳者が文脈を把握しやすくするために、説明と意味を指定することもできます。

ランタイム翻訳

私が言及していたように、上記の CLI コマンド (ng serve --configuration=fr または ng build --localize) を使用する場合、アプリケーションはコンパイルされてからブラウザで表示する前に翻訳されるので、ランタイムに $localize を呼び出す必要はありません。 つまり、$localize 呼び出しを含む 1 つのアプリケーションだけを出荷して、アプリケーションが起動する前に、必要な翻訳をロードすることができます。

import '@angular/localize/init';import { loadTranslations } from '@angular/localize';loadTranslations({ '1815172606781074132': 'Bonjour {$name}\xa0! Vous avez {$userCount} utilisateurs.'});

見てわかるように、ロケールを考慮する必要はありません。

これで、単純な ng serve を実行すると、タイトルがフランス語で表示されます！また、ng xi18n や messages.fr.xlf は必要なく、angular.json の各ロケールのための特定の設定も不要です。長期的には、これが適切にサポートおよび文書化されると、ほとんどの国際化ライブラリのように、実行時に JSON ファイルをロードできるようになるはずです。v9 でそれを達成することもできます。それは少し手動での作業ですが、可能です。

What about changing the locale on the fly? しかし、ブラウザーの更新を気にしないのであれば、可能です。

• ユーザーが新しい言語 (たとえば、スペイン語) を選択します。
• ブラウザで言語を保存します (たとえば localStorage に)。
• ページを再ロードし、アプリケーションを再起動します polyfills.ts で、保存されている言語を読み込んで開始します
• loadTranslations でスペイン語の翻訳を正しく読み込むように設定します。

もちろん、これは将来的に Angular の将来のバージョンで、またはエコシステムからのライブラリによって、よりスムーズになるでしょう。とにかく、私たちはアプリケーションのバージョンを 1 つだけ出荷して、実行時に翻訳をロードするだけに近づきつつあります。