🔖

Angularの日本語化

2026/01/31に公開

Angular

tech

ロケールコードは LOCALE_ID に指定されている。既存は英語になっている。

以下の様に、app.config.ts でロケールコードの上書きを行うことで日本語化できる。

app.config.ts

import { ApplicationConfig, LOCALE_ID } from '@angular/core';

export const appConfig: ApplicationConfig = {
  providers: [
    // ～省略～
    // LOCALE_ID を日本語に
    { provide: LOCALE_ID, useValue: 'ja-JP' },
  ],
};

ただし、これだけでは DatePipe を使った時に NG0701: Missing locale data for the locale "ja-JP".' for pipe '_DatePipe のエラーが出てしまう。

そのため、以下の様に @angular/common/locales にある日本語ロケールデータをグローバルロケールに登録する必要がある。

app.config.ts

import { ApplicationConfig, LOCALE_ID } from '@angular/core';
// グローバルロケールデータの登録関数
import { registerLocaleData } from '@angular/common';
// 日本語ロケールデータを読み込み
import localeJa from '@angular/common/locales/ja';

// 日本語ロケールデータをグローバルロケールに登録
registerLocaleData(localeJa)

export const appConfig: ApplicationConfig = {
  providers: [
    // LOCALE_ID を日本語に
    { provide: LOCALE_ID, useValue: 'ja-JP' },
  ],
};

また、通貨コードは別途指定する必要があるので、CurrencyPipe を日本円にしたい場合は以下を追加する必要がある。

  // 通貨は別途指定する必要がある。'JPY' で日本円に
  { provide: DEFAULT_CURRENCY_CODE, useValue: 'JPY' }

Angular Material の DatePciker を利用する場合

デフォルトでは、MAT_DATE_LOCALE インジェクショントークンは @angular/core の既存の LOCALE_ID を利用する。

もし、LOCALE_ID は既存値を利用し、DatePickerだけを日本語化したい場合は MAT_DATE_LOCALE の値を変更する。

app.config.ts

import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    // Angular Material の DatePicker を利用する場合はこれが必要
    provideNativeDateAdapter(),
    // LOCALE_ID はデフォルトのまま、DatePickerだけを日本語にしたい場合
    { provide: MAT_DATE_LOCALE, useValue: 'ja-JP' },
  ],
};

以下サンプルの全コード。

app.config.ts

import { ApplicationConfig, DEFAULT_CURRENCY_CODE, LOCALE_ID } from '@angular/core';
import { provideNativeDateAdapter } from '@angular/material/core';
// グローバルロケールデータの登録関数
import { registerLocaleData } from '@angular/common';
// 日本語ロケールデータを読み込み
import localeJa from '@angular/common/locales/ja';

// 日本語ロケールデータをグローバルロケールに登録
registerLocaleData(localeJa)

export const appConfig: ApplicationConfig = {
  providers: [
    // Angular Material の DatePicker を利用する場合はこれが必要
    provideNativeDateAdapter(),
    // LOCALE_ID を日本語に
    { provide: LOCALE_ID, useValue: 'ja-JP' },
    // 追加は別に指定する必要がある。'JPY' で日本円に
    { provide: DEFAULT_CURRENCY_CODE, useValue: 'JPY' }
  ],
};

app.html

<mat-form-field>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<p>{{ currentDate | date }}</p>
<p>{{ price | currency }}</p>

app.ts

import { CurrencyPipe, DatePipe } from '@angular/common';
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';

@Component({
  selector: 'app-root',
  imports: [
    MatFormFieldModule, MatInputModule, MatDatepickerModule,
    DatePipe, CurrencyPipe
  ],
  templateUrl: './app.html',
  styleUrl: './app.css',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class App {
  currentDate = new Date();
  price = 1980;
}

Angular Material の DatePciker を利用する場合

Discussion