NG2-チャート：それは「キャンバス」の既知のプロパティではありませんので、「データ」にバインドすることはできません

Question

はアイデアが 4角度とNG2-チャートでchart.jsを使用することです。 私はhereの例で作業していますが、動作させることができません。

私は、次のエラーメッセージが出ます：私はすでにアプリにインポートし

それは「キャンバス」の既知の特性ではないので

は、「データ」にバインドすることはできません。ほとんどの投稿のようにmodule.tsはこのエラーを示唆しています。私は行方不明のものがありますか？

... component.html：

<div style="display: block"> 
    <canvas baseChart 
     [data]="data" 
     [labels]="labels" 
     [chartType]="type"> 
    </canvas> 
</div> 

... component.ts

... 
labels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales']; 
data:number[] = [350, 450, 100]; 
type:string = 'doughnut'; 
... 

のindex.html：

<script src="lib/chart.js/dist/chart.js"></script> 

app.module.ts：

import { ChartsModule } from 'ng2-charts/ng2-charts'; 
imports: [ 
    ... 
    ChartsModule, 
    ... 
], 

system.js

map: { 
    ... 
    'ng2-charts': 'npm:ng2-charts/bundles' 
}, 
packages: { 
    ... 
    'ng2-charts': { 
     defaultExtension: 'js' 
    } 
} 

package.json：試行錯誤ののserveral時間後

"dependencies": { 
    "@angular/animations": "^4.3.0", 
    "@angular/common": "^4.3.0", 
    "@angular/compiler": "^4.3.0", 
    "@angular/compiler-cli": "^4.3.0", 
    "@angular/core": "^4.3.0", 
    "@angular/forms": "^4.3.0", 
    "@angular/http": "^4.3.0", 
    "@angular/platform-browser": "^4.3.0", 
    "@angular/platform-browser-dynamic": "^4.3.0", 
    "@angular/platform-server": "^4.3.0", 
    "@angular/router": "^4.3.0", 
    "@angular/upgrade": "4.3.0", 
    "@ngx-translate/core": "6.0.1", 
    "@ngx-translate/http-loader": "0.0.3", 
    "@types/jquery": "2.0.44", 
    "bootstrap": "3.3.7", 
    "core-js": "2.4.1", 
    "ej-angular2": "15.1.41", 
    "font-awesome": "4.7.0", 
    "jquery": "3.2.1", 
    "jsrender": "0.9.84", 
    "pretty-checkbox": "2.2.1", 
    "reflect-metadata": "0.1.10", 
    "rxjs": "5.4.0", 
    "syncfusion-javascript": "15.1.41", 
    "systemjs": "0.20.12", 
    "typescript": "^2.4.1", 
    "zone.js": "0.8.10", 
    "ng2-charts": "1.6.0", 
    "chart.js": "2.6.0" 
}, 

Answer 1

それは私が働いてしまいました。

app.module.ts：

import { ChartsModule } from 'ng2-charts'; 

system.js：

map: { 
    ... 
    'ng2-charts': 'npm:ng2-charts/bundles' 
}, 
packages: { 
    ... 
    'ng2-charts': { 
     main: 'ng2-charts.umd.min.js', 
     defaultExtension: 'js' 
    } 
} 

私は、次のものを変更しました