ionicカレンダーアプリを日本語にしたい。

Question

前提・実現したいこと

ionic2-calendarを使ってカレンダーアプリを製作しており、それを日本語化したいです。

試したこと

こちらのAngular公式ドキュメントを参考にしましたが、下記のエラーが発生しました。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { NgCalendarModule  } from 'ionic2-calendar';
import { LOCALE_ID } from '@angular/core';


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    NgCalendarModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LOCALE_ID, useValue: 'ja-JP' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

---

今度はionic2-calendarのドキュメントにあった様に

calendar = {
    mode: 'month',
    locale: 'ja-JP'
  };

を追加しましたが、同じエラーでした。

発生している問題・エラーメッセージ

core.js:9110 ERROR Error: Uncaught (in promise): Error: InvalidPipeArgument: 'Missing locale data for the locale "ja-JP".' for pipe 'DatePipe'
Error: InvalidPipeArgument: 'Missing locale data for the locale "ja-JP".' for pipe 'DatePipe'
    at invalidPipeArgumentError (common.js:5624)
    at DatePipe.transform (common.js:6764)
    at MonthViewComponent.formatDayHeaderLabel (monthview.js:45)
    at MonthViewComponent.push../node_modules/ionic2-calendar/monthview.js.MonthViewComponent.getViewData (monthview.js:174)
    at CalendarService.push../node_modules/ionic2-calendar/calendar.service.js.CalendarService.populateAdjacentViews (calendar.service.js:103)
    at MonthViewComponent.push../node_modules/ionic2-calendar/monthview.js.MonthViewComponent.refreshView (monthview.js:329)
    at MonthViewComponent.push../node_modules/ionic2-calendar/monthview.js.MonthViewComponent.ngOnInit (monthview.js:63)
    at checkAndUpdateDirectiveDynamic (core.js:27821)
    at checkAndUpdateNodeDynamic (core.js:38494)
    at checkAndUpdateNode (core.js:38414)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

ERROR TypeError: Cannot read property 'dayHeaders' of undefined

補足情報（FW/ツールのバージョンなど）

ionic info

Ionic:

   Ionic CLI                     : 5.2.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.7.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Utility:

   cordova-res : 0.6.0 
   native-run  : 0.2.8 

System:

   NodeJS : v10.15.1 (/usr/local/bin/node)
   npm    : 6.4.1
   OS     : macOS Mojave

Answer 1

こちらを参考に解決しました。

また、ionic2-calendarのドキュメントのLocalizationの項目に以下の内容がありました。

For version 0.4.x+ which depends on Ionic 3.9.2+ and Angular 5.0+, locale module needs to be registered explicitly in module file as below.

import { registerLocaleData } from '@angular/common';
import localeZh from '@angular/common/locales/zh';
registerLocaleData(localeZh);

その為、app.module.tsを

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { NgCalendarModule  } from 'ionic2-calendar';
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeJa from '@angular/common/locales/ja';

registerLocaleData(localeJa);


@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    NgCalendarModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    { provide: LOCALE_ID, useValue: 'ja-JP' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

としてやると、日本語になりました。

home.page.tsの

calendar = {
    mode: 'month',
    locale: 'ja-JP'
  };

は無くても日本語になりました。。。

home.page.htmlの

<calendar ... [locale]="calendar.locale"></calendar>

も無くてOKでした。。。。