NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'
<p>I am trying to use the basic example of NG2-Charts (<a href="http://valor-software.com/ng2-charts/">http://valor-software.com/ng2-charts/</a>)</p>

<p>I copy pasted the HTML part</p>

<pre><code>  &lt;div style="display: block"&gt;
    &lt;canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
</code></pre>

<p>and the TypeScript part</p>

<pre><code>  private barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  private barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  private barChartType: string = 'bar';
  private barChartLegend: boolean = true;

  private barChartData: any[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

  // events
  private chartClicked(e: any): void {
      console.log(e);
  }

  private chartHovered(e: any): void {
      console.log(e);
  }
</code></pre>

<p>I run <code>npm install ng2-charts --save</code>, <code>npm install chart.js --save</code> and <code>typings install dt~chart.js --save --global</code></p>

<p>I also imported chart.js in my vendor.ts file</p>

<pre><code>import 'chart.js';
</code></pre>

<p>My dependencies: </p>

<pre><code>{
    "@angular/common": "^2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angular2-jwt": "^0.1.18",
    "chart.js": "^2.3.0",
    "core-js": "^2.4.0",
    "json-loader": "^0.5.4",
    "moment": "^2.14.1",
    "ng2-charts": "^1.4.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.11",
    "zone.js": "^0.6.23"
  }
</code></pre>

<p>Here is the Error</p>

<pre><code>Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo"&gt;
            &lt;div style="display: block"&gt;
                &lt;canvas baseChart [ERROR -&gt;][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("          &lt;div style="display: block"&gt;
                &lt;canvas baseChart [datasets]="barChartData" [ERROR -&gt;][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60
Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block"&gt;
                &lt;canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR -&gt;][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("  &lt;canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR -&gt;][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR -&gt;][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"&gt;
"): PlayerprofileComponent@39:140 ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo"&gt;
            &lt;div style="display: block"&gt;
                &lt;canvas baseChart [ERROR -&gt;][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): PlayerprofileComponent@39:34
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("          &lt;div style="display: block"&gt;
                &lt;canvas baseChart [datasets]="barChartData" [ERROR -&gt;][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): PlayerprofileComponent@39:60
Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block"&gt;
                &lt;canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR -&gt;][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): PlayerprofileComponent@39:86
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("  &lt;canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR -&gt;][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): PlayerprofileComponent@39:114
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR -&gt;][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"&gt;
"): PlayerprofileComponent@39:140
    at TemplateParser.parse (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:623:1), &lt;anonymous&gt;:133:19)
    at RuntimeCompiler._compileTemplate (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:244:51)
    at eval (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:167:83)
    at Set.forEach (native)
    at compile (eval at &lt;anonymous&gt; (http://localhost:8080/vendor.js:2103:1), &lt;anonymous&gt;:167:47)
    at ZoneDelegate.invoke (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:192:28)
    at Zone.run (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:85:43)
    at eval (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:451:57)
    at ZoneDelegate.invokeTask (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:225:37)
    at Zone.runTask (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:125:47)
    at drainMicroTaskQueue (eval at &lt;anonymous&gt; (http://localhost:8080/polyfills.js:4105:1), &lt;anonymous&gt;:357:35)
</code></pre>

<p>The NG2-Charts website says I need to include this in the HTML</p>

<pre><code>&lt;script src="node_modules/chart.js/src/chart.js"&gt;&lt;/script&gt;
</code></pre>

<p>But I think thats not correct because how would that statement work in a productive minified / built app? I also thought my webpack import statement would already take care of that? 
I googled around but sadly only found stuff for some Angular 2 Beta version on NG2 Charts. </p>

<p>Does anyone has an idea on how to fix that? </p>

<p>Thanks and Cheers, 
Raphael Hippe</p>