[Angular 2-4] Locale 사용 시 브라우저마다 DatePipe 결과가 다른 증상

환경: Angular 4



최근 다국어를 고려한 프로젝트를 제작중인데,
DatePipe 사용 시 의도하지 않은 결과가 나와서 혼란스럽다.



증상
1004lucifer
아래의 소스를 사용 시 브라우저마다 결과값이 다르게 나올 수가 있다.
(Module 에서 LOCALE_ID 지정시에만 증상 발생)

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { LOCALE_ID, NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'ko' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nowDate = new Date();
}

app.component.html

<h1>
  {{ nowDate | date:'yyyy-MM-dd HH:mm:ss'}}
</h1>

처음에 'yyyy-MM-dd HH:mm:ss' 패턴대로 나올꺼라고 생각했지만 결과는 아래와 같다.

Chrome v62.0.3202.89

Microsoft Edge 38.14393.0.0

1004lucifer

JSFiddle 에서는 아래와 같이 보여진다.
(이것역시 보는 브라우저에 따라 결과가 다르다.)







원인

왜그런지 한참을 찾았는데 원인은
Angular 4 버전까지 DatePipe에서 Browser의 i18n API 를 사용하기 때문이다.


현재 Angular 5 가 출시 되었으며 i18n 에서 다중 브라우저 불일치 버그로 인해 브라우저 API 를 사용하지 않고 Unicode Common Locale Data Repository (CLDR) 기반의 데이터를 자체적으로 가지고 있다고 한다.
- https://github.com/angular/angular/blob/master/CHANGELOG.md#i18n-pipes

1004lucifer
Angular 5 가 나온 사실을 모르고 github의 한글 형식의 CLDR 소스(링크)를 보고 어디서 사용해서 자동으로 한글이 붙어서 나오는걸까 알아봤었고, Angular 사이트에서 본 DatePipe API 또한 Angular 5 버전 4버전이라 착각하며 보면서 한참을 삽질을 하고 있었다.

http://han41858.tistory.com/43
삽질을 하다가 위의 블로그의 Angular5 소식을 보고 바로 의문이 풀렸다.





해결방법

현재 상황으로는 아래의 우회방법 말고는 딱히 해결방법이 없어보인다.

아직 테스트 해보지는 못했으나 Angular 5 에서는 이슈가 해결되거나 Locale을 바꾸지 않는 정상적인 방법으로 해결이 가능하지 않을까 싶다.
(지금 쓰고있는 JHipster 가 아직 Angular 5지원을 안하는데 어쩌지?? ㅠㅠ)
1004lucifer
app.component.ts

import { Component } from '@angular/core';
import {DatePipe} from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nowDate = new Date();
  datePipe: DatePipe;
  constructor() {
    this.datePipe = new DatePipe('en-US');
  }
}

app.component.html

<h1>
  {{ datePipe.transform(nowDate, 'yyyy-MM-dd HH:mm:ss') }}
</h1>

JSFiddle