ローカライズ済みバンドルの構築
ロケールごとのアプリケーションビルドを生成します
「ローカライズ済みバンドルの構築」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
ロケールごとに1つのビルド
Angularのi18nはコンパイル時に動作します。翻訳を組み込んだ、ロケールごとの完全に最適化された別々のバンドルを生成します。ユーザーは自分の言語だけをダウンロードするため、実行時の翻訳コストはありません。
ローカライズされたビルドの設定
angular.jsonでロケールを宣言したら、ビルドオプションにlocalize: trueを設定して、すべてのロケールを一度に生成します。
"build": {
"options": {
"localize": true,
"outputPath": "dist/app"
}
}すべてのロケールのビルド
プロダクションビルドを実行すると、CLIはロケールごとに1つのフォルダーを出力します。各フォルダーには完全なアプリが含まれます。
ng build --localize
# dist/app/en/ dist/app/fr/ dist/app/es/単一ロケールのビルド
反復を高速化するため、ロケールコードを渡して1つのロケールだけをビルドできます。
ng build --localize=frロケールごとのbase hrefの設定
各ロケールのビルドには独自のbaseHrefを設定できるため、/fr/のようなサブパスから配信できます。angular.jsonの各ロケール配下で設定します。
"locales": {
"fr": {
"translation": "src/locale/messages.fr.xlf",
"baseHref": "/fr/"
}
}開発時の特定ロケールの配信
ng serveは一度に1つのロケールを配信します。開発中に翻訳をプレビューするには、使用したい設定またはロケールを渡します。
ng serve --configuration=frユーザーのロケールへのルーティング
各ロケールは個別にデプロイ可能なフォルダーであるため、通常はサーバーまたはCDNを使い、Accept-Languageヘッダーや言語切り替えによってユーザーを適切なサブパスへリダイレクトします。
カスタム構成での実行時$localize
高度な構成では、ブートストラップ前に@angular/localizeのloadTranslations()を使って、実行時に翻訳を読み込めます。これにより、ロケールごとのビルドの代わりに、1つのバンドルと取得した翻訳マップを使用します。
import { loadTranslations } from '@angular/localize';
loadTranslations(frTranslations);
// then bootstrapApplication(App)ポリフィルの要件
$localizeを使用するには、@angular/localizeのポリフィルが必要です。CLIで一度追加すると、タグ付きテンプレートの翻訳に必要なグローバルを登録できます。
ng add @angular/localizeバンドルサイズを小さく保つ
翻訳はビルド時に行われるため、フランス語のバンドルにはフランス語のテキストだけが含まれます。他の言語や、ブラウザーに配信される翻訳エンジンは含まれません。これが、コンパイル時i18nによってアプリを軽量に保てる理由です。
出力のデプロイ
dist/appディレクトリ全体をデプロイしてください。各ロケールのサブフォルダーは、単独で動作するアプリです。ホストを設定し、/fr/ではフランス語版を、デフォルトロケールではルートまたは独自のパスでアプリを配信するようにします。
確認問題
Angularはどのように翻訳を配信しますか？
まとめ
localize: trueを設定し、ng build --localizeを実行すると、ロケールごとに完全なアプリを含むフォルダーが1つずつ生成されます。ロケールごとのbaseHref（例：/fr/）を使用し、開発時に--configurationで単一のロケールを配信します。また、@angular/localizeのポリフィルを追加し、必要に応じてカスタム構成で実行時に翻訳を読み込んでください。
よくある質問
「ローカライズ済みバンドルの構築」レッスンは無料ですか？
はい。「ローカライズ済みバンドルの構築」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「ローカライズ済みバンドルの構築」で何を学びますか？
ロケールごとのアプリケーションビルドを生成します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「ローカライズ済みバンドルの構築」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 翻訳対象テキストのマーキング
- メッセージの抽出と翻訳
- 複数形とSelect（ICU）
- ローカライズ済みバンドルの構築