angular-i18n

Angular i18n

バージョン： Angular 21 (2025) タグ： i18n、国際化、ローカライズ、翻訳

参考資料： i18n ガイド • Angular Localize

API の変更

このセクションでは、最近のバージョン固有の API の変更について説明します。

• NEW：@angular/localize — 組み込みの i18n サポート

• NEW：$localize — メッセージの抽出

• NEW：Angular CLI i18n — 複数言語のビルド

• NEW：遅延読み込み翻訳 — 実行時の翻訳読み込み

ベストプラクティス

• テキストに翻訳対象のマークを付けます

@Component({
  template: `
    <h1 i18n="@@welcome">Welcome to our app!</h1>
    <p i18n="@@greeting">Hello, world!</p>
  `
})
export class HomeComponent {}

• プレースホルダーを使って翻訳します

@Component({
  template: `
    <p i18n="@@userCount">
      There are { count, plural, =0 { no users } =1 { one user } other { {{ count }} users } } in the system.
    </p>
  `
})
export class UsersComponent {
  count = 5;
}

• 性別に応じた翻訳を使います

@Component({
  template: `
    <p i18n="@@message">
      { gender, select, male {He} female {She} other {They} } is attending.
    </p>
  `
})
export class MessageComponent {}

• メッセージを抽出します

ng extract-i18n --output-path src/locale

• 複数のロケール向けにビルドします

ng build --localize

• angular.json でロケールを設定します

{
  "projects": {
    "my-app": {
      "i18n": {
        "locales": {
          "en": "src/locale/messages.en.xlf",
          "es": "src/locale/messages.es.xlf",
          "fr": "src/locale/messages.fr.xlf"
        }
      }
    }
  }
}

• 要素に i18n 属性を使います

@Component({
  template: `
    <img i18n-title title="Logo" src="logo.png" />
    <a i18n-href href="/about" hreflang="es">About</a>
  `
})
export class HeaderComponent {}

• 実行時の翻訳には @angular/localize を使います

import { $localize } from '@angular/localize';

$localize`:@@greeting:Hello, ${name}:name:World!`;

• 実行時の翻訳には ngx-translate を使います

// Alternative: use @ngx-translate/core
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [TranslateModule.forRoot()]
})
export class AppModule {}

• 翻訳を遅延読み込みします

// Using @ngx-translate
this.translate.getTranslation('en').subscribe(translations => {
  // Load translations
});