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を追加しました。.. ..

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

は${value}が実際にモーメント文字列に置き換えられますことを...

注このテンプレート・コンポーネントを作成しました。だから、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> 

をここから入手可能であり、このtypescriptですクラス書きました：あなたのサポートのために、事前に

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" 
},