[JHipster] Angular 4 사용 시 Audits 메뉴 표시되지 않는 문제

version: JHipster 4.8.0



증상
1004lucifer
JHipster 프로젝트 생성 하고 admin 로그인 후 '관리자=>Audit' 메뉴 들어가게되면 화면이 오류가 나며 정상적으로 보여지지 않게된다.

{
  "type" : "http://www.jhipster.tech/problem/problem-with-message",
  "title" : "Bad Request",
  "status" : 400,
  "detail" : "Failed to convert value of type 'java.lang.String[]' to required type 'java.time.LocalDate'; nested exception is org.springframework.core.convert.ConversionFailedException: Failed to convert from type [java.lang.String] to type [@org.springframework.web.bind.annotation.RequestParam java.time.LocalDate] for value '2017년-08월-26일'; nested exception is java.lang.IllegalArgumentException: Parse attempt failed for value [2017년-08월-26일]",
  "message" : "error.http.400"
}

디버깅을 해보니 날짜를 넘겨줄 때 '2017-08-26' 이렇게 넘겨줘야 하는걸 년/월/일 을 붙여서 넘겨주고 있었다.

Angular 에서 기본적으로 사용하는 DatePipe 모듈에서 timezone 개념이 있는데 EndUser의 시스템의 로케일을 기본으로 가져온다고 한다.




해결방법

아래와 같이 Locale 을 en-US 형식으로 DatePipe를 생성하여 정상적으로 나오는 것을 확인했다.
1004lucifer

src/main/webapp/app/admin/audits/audits.component.ts

export class AuditsComponent implements OnInit {
    audits: Audit[];
    fromDate: string;
    itemsPerPage: any;
    links: any;
    page: number;
    orderProp: string;
    reverse: boolean;
    toDate: string;
    totalItems: number;
    datePipe: DatePipe;

    constructor(
        private auditsService: AuditsService,
        private parseLinks: JhiParseLinks,
        private paginationConfig: PaginationConfig,
        // private datePipe: DatePipe
    ) {
        this.itemsPerPage = ITEMS_PER_PAGE;
        this.page = 1;
        this.reverse = false;
        this.orderProp = 'timestamp';
        this.datePipe = new DatePipe('en-US');
    }
 
 ...
}