Angular i18n
Angular i18n ソリューション
スタンドアロンコンポーネント、Signals、SSR をサポートする Angular アプリ向け。
Get started in 3 steps
1
Install
Add the Better i18n Angular package to your project.
terminal
npm install @better-i18n/angular
2
Import the module
Import BetterI18nModule in your AppModule or standalone component.
app.module.ts
import { BetterI18nModule } from '@better-i18n/angular';
@NgModule({
imports: [
BetterI18nModule.forRoot({
project: 'your-org/your-project',
defaultLocale: 'en',
}),
],
})
export class AppModule {}3
Use the translate pipe
Use the translate pipe or directive in your templates to display translations.
app.component.html
<h1>{{ 'welcome' | translate }}</h1>
<p>{{ 'greeting' | translate: { name: userName } }}</p>機能
スタンドアロンコンポーネント対応
翻訳パイプ
i18n ディレクティブ
注入可能なサービス
遅延ロードモジュール
AOT コンパイル対応
Angular Universal SSR
Signals 対応
Angular CLI 連携
クイックスタート
パイプとサービスを使って Angular アプリに i18n を追加します。
// app.component.ts
import { Component } from '@angular/core';
import { TranslateService } from '@better-i18n/angular';
@Component({
selector: 'app-root',
template: `
<h1>{{ 'welcome' | translate }}</h1>
<p>{{ 'greeting' | translate: { name: 'World' } }}</p>
`
})
export class AppComponent {
constructor(private translate: TranslateService) {
translate.setDefaultLang('en');
}
}人気のAngular i18nライブラリと連携
Better i18nはAngular i18nライブラリを補完します — 翻訳を視覚的に管理し、翻訳者と協力し、CDN経由でデプロイ。
Better i18n + @ngx-translate/core
最も広く使われているAngular翻訳ライブラリ。パイプ、ディレクティブ、サービスインジェクションによるランタイム翻訳。
Better i18nはngx-translate JSONフォーマットにエクスポート。ダッシュボードで翻訳を編集し、リポジトリに自動同期。
Better i18n + Angular i18n (built-in)
AOTコンパイル、ICU式、ビルド時翻訳抽出を備えたAngularの公式i18nシステム。
Angular XLIFFフォーマットにエクスポート。Better i18nが翻訳ワークフローを管理し、Angular CLIがlocale別バンドルをビルド。
Better i18n + Transloco
遅延ロード、豊富なプラグイン、優れたTypeScriptサポートを備えたAngular向けモダンで軽量なi18nライブラリ。
Better i18nのGitHub連携でTransloco JSONフォーマットに翻訳を同期。CDN配信によるリアルタイム更新。