Aurelia - 처리되지 않은 거부 - Chart.js 및 Moment.js

Question

나는 aurelia, chart.js 및 moment.js에 문제가 있습니다.

사실 저는 다른 클래스에서 별도로 moment.js와 chart.js를 사용하고 있습니다. 내가 x 배율에 시간 dimesion와 플롯을 그리는 chart.js 시간 규모 기능을 사용하려고 그럼에도 불구 경우이 오류를 얻을 :

[Warning] Unhandled rejection Error: Chart.js - Moment.js could not be found! You must include it before Chart.js to use the time scale. Download at https://momentjs.com (vendor-bundle.js, line 1395) 
    initialize@http://localhost:9001/scripts/vendor-bundle.js:35970:13268 
    Element@http://localhost:9001/scripts/vendor-bundle.js:35968:6217 
    each@http://localhost:9001/scripts/vendor-bundle.js:35968:7779 
    buildScales@http://localhost:9001/scripts/vendor-bundle.js:35967:28931 
    initialize@http://localhost:9001/scripts/vendor-bundle.js:35967:27712 
    Controller@http://localhost:9001/scripts/vendor-bundle.js:35967:27429 
    t@http://localhost:9001/scripts/vendor-bundle.js:35968:22824 
    load@http://localhost:9001/scripts/app-bundle.js:1155:22 
    attached@http://localhost:9001/scripts/app-bundle.js:1160:22 
    attached@http://localhost:9001/scripts/vendor-bundle.js:21894:32 
    attached@http://localhost:9001/scripts/vendor-bundle.js:19969:32 
    attached@http://localhost:9001/scripts/vendor-bundle.js:20323:23 
    attached@http://localhost:9001/scripts/vendor-bundle.js:19974:29 
    attached@http://localhost:9001/scripts/vendor-bundle.js:20323:23 
From previous event: 
    configure@http://localhost:9001/scripts/app-bundle.js:579:29 
From previous event: 
    promiseReactionJob@[native code] 
From previous event: 
    execCb@http://localhost:9001/scripts/vendor-bundle.js:5432:38 
    check@http://localhost:9001/scripts/vendor-bundle.js:4620:57 
    enable@http://localhost:9001/scripts/vendor-bundle.js:4912:27 
    enable@http://localhost:9001/scripts/vendor-bundle.js:5293:45 
    each@http://localhost:9001/scripts/vendor-bundle.js:3798:35 
    enable@http://localhost:9001/scripts/vendor-bundle.js:4849:21 
    init@http://localhost:9001/scripts/vendor-bundle.js:4525:32 

은 내가 aurelia.json 파일에 libs와 추가 .. 있습니다 .. ${value} 실제로 순간 문자열로 대체됩니다 것을이 템플릿 구성 요소 생성

{ 
    "name": "moment", 
    "path": "../node_modules/moment/min/moment.min" 
}, 
{ 
    "name": "chart.js", 
    "path": "../node_modules/chart.js/dist", 
    "main": "Chart.min", 
    "deps": ["moment"] 
}, 

...

참고. 그래서 moment.js ...

<template> 

    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h3 class="panel-title">${value}</h3> 
    </div> 
    <div class="panel-body"> 

     <canvas id="mychart"/> 

    </div> 
    </div> 

</template> 

을 사용할 수 있습니다 여기이 타이프 라이터 클래스 쓴 : 귀하의 지원을 사전에

import {autoinject} from 'aurelia-framework'; 
import {SalesService} from "../../service/SalesService"; 
import {EventAggregator} from "aurelia-event-aggregator"; 
import {Subscription} from "aurelia-event-aggregator"; 
import {FilterService} from "../../service/FilterService"; 
import {SalesPeriodSum} from "../../domain/SalesPeriodSum"; 
import * as moment from 'moment'; 
import Moment = moment.Moment; 
import * as Chart from 'chart.js'; 

@autoinject 
export class SalesInPeriod { 

    public value: Moment; 
    private _salesService: SalesService; 
    private _eventAggregator: EventAggregator; 
    private _subscription: Subscription; 
    private _filterService: FilterService; 
    private _items: Array<SalesPeriodSum>; 

    constructor(salesService: SalesService, eventAggregator: EventAggregator, filterService: FilterService) { 
    this._salesService = salesService; 
    this._eventAggregator = eventAggregator; 
    this._filterService = filterService; 
    } 

    private load() { 
    this._salesService.getSalesInPeriod(this._filterService.request).then(result => { 
     this._items = result; 
    }); 

    this.value = moment(); 

    let config = { 
     type: 'line', 
     data: { 
     datasets: [{ 
      label: "Dataset with string point data", 
      data: [{ 
      x: moment().add(0, 'days'), 
      y: 100 
      }, { 
      x: moment().add(1, 'days'), 
      y: 120 
      }, { 
      x: moment().add(2, 'days'), 
      y: 90 
      }, { 
      x: moment().add(3, 'days'), 
      y: 105 
      }], 
      fill: false 
     }] 
     }, 
     options: { 
     responsive: true, 
     title: { 
      display: true, 
      text: "Chart.js Time Point Data" 
     }, 
     scales: { 
      xAxes: [{ 
      type: "time", 
      display: true, 
      scaleLabel: { 
       display: true, 
       labelString: 'Date' 
      } 
      }], 
      yAxes: [{ 
      display: true, 
      scaleLabel: { 
       display: true, 
       labelString: 'value' 
      } 
      }] 
     } 
     } 
    }; 

    let ctx = document.getElementById("mychart"); 
    new Chart(ctx, config); 
    } 

    attached() { 
    this._subscription = this._eventAggregator.subscribe('filter_changed', response => this.load()); 
    this.load(); 
    } 

    detached() { 
    this._subscription.dispose(); 
    } 

    get items(): Array <SalesPeriodSum> { 
    return this._items; 
    } 

} 

감사합니다.

Answer 1

Moment.js은 Chart.js의 시간 척도가 작동 할 수 있도록 전역 변수로 설정됩니다.

import { Moment } from 'moment'; 
window.Moment = Moment; 

을하는

는

을 수정해야합니다.

Answer 2

는 다음에 aurelia.json에 순간 정의를 변경

: 귀하의 답변에 대한

{ 
    "name": "moment", 
    "path": "../node_modules/moment", 
    "main": "moment" 
},