환경: 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
댓글
댓글 쓰기