title: Aurelia - Unhandled rejection - Chart.js and Moment.js
body: <p>I have trouble with aurelia, chart.js and moment.js. </p>
  
  <p>Actually I'm using moment.js and chart.js separately in other classes and it works find. Nonetheless if I try to use chart.js time-scale feature for drawing a plot with a time-dimesion on the x scale I get this error: </p>
  
  <pre><code>[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
  </code></pre>
  
  <p>I added the libs into the aurelia.json file.... </p>
  
  <pre><code>{
    "name": "moment",
    "path": "../node_modules/moment/min/moment.min"
  },
  {
    "name": "chart.js",
    "path": "../node_modules/chart.js/dist",
    "main": "Chart.min",
    "deps": ["moment"]
  },
  </code></pre>
  
  <p>created this template component... </p>
  
  <p>Note that the <code>${value}</code> actually gets replaced by a moment string. So moment.js is available here...  </p>
  
  <pre><code>&lt;template&gt;
  
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;
        &lt;h3 class="panel-title"&gt;${value}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="panel-body"&gt;
  
        &lt;canvas id="mychart"/&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  </code></pre>
  
  <p>and wrote this typescript class: </p>
  
  <pre><code>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&lt;SalesPeriodSum&gt;;
  
    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 =&gt; {
        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 =&gt; this.load());
      this.load();
    }
  
    detached() {
      this._subscription.dispose();
    }
  
    get items(): Array &lt;SalesPeriodSum&gt; {
      return this._items;
    }
  
  }
  </code></pre>
  
  <p>Thanks in advance for your support. </p>