Angular2＆NG2-チャートモジュール：

Question

私はちょうどangular2を使用して開始し、私は英雄のチュートリアルの見学をしました： https://angular.io/docs/ts/latest/tutorial/

私はさらに行って、いくつかのカスタムコードを行なったし、すべてがうまくています。

私はNG2-チャートモジュールを使用しようとしたときしかし、私はそれが動作するように作ることができなかった。 http://valor-software.com/ng2-charts/

私はこの

npm install ng2-charts --save 

この

npm install chart.js --save 

をしましたしかし、jsをインデックスファイルにインポートするとき、これはうまくいかなかった：

0 、

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script> 

次頭痛ように私を与えている部分である：

は、だから私は、これを使って、それを修正しなければならなかった

//app.module.ts  
import {ChartsModule} from 'ng2-charts/ng2-charts'; 
... 

imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    HttpModule, 
    ChartsModule, 
    ], 
.... 

私はなかれ

GET localhost:3000/ng2-charts/ng2-charts 404 (Not Found) 
Error: (SystemJS) XHR error (404 Not Found) loading localhost:3000/ng2-charts/ng2-charts 
    Error: XHR error (404 Not Found) loading localhost:3000/ng2-charts/ng2-charts 
     at XMLHttpRequest.wrapFn [as _onreadystatecha 

を取得しています

インポートするとわかります

import {ChartsModule} from 'node_modules/ng2-charts/ng2-charts' 

私のサーバーの叫び心に留めておくべき

app/app.module.ts(17,31): error TS2307: Cannot find module 'node_modules/ng2-charts/ng2-charts'. 

物事：私は& angular2世界をJSために本当に新しいよ、私はまだ物事がここでどのように機能するかを非常によく理解していない事。 私と同じ問題を抱えている人もいますが、答えは分かりませんでした。私のアプリアーキテクチャはヒーローのツアーから来たものですから、私はそれらを使うことができません。それは今のところです。

私は3つの問題を疑う：私は /パス自体が間違っている/ NG2-チャートは、いくつかの.jsファイルを生成するために、「コンパイル」しなければならない「NG2-チャートはnode_modules /」に「NG2-チャート」をバインドする必要があります をそうではありません。

助けることができるいくつかの情報：

$ npm -v 
    3.10.9 
    $ tsc -v 
    message TS6029: Version 1.5.3 
    $ ng -v 
    angular-cli: 1.0.0-beta.24 
    node: 6.9.2 
    os: win32 x64 
    @angular/common: 2.4.2 
    @angular/compiler: 2.4.2 
    @angular/core: 2.4.2 
    @angular/forms: 2.4.2 
    @angular/http: 2.4.2 
    @angular/platform-browser: 2.4.2 
    @angular/platform-browser-dynamic: 2.4.2 
    @angular/router: 3.4.2 

（そして誰かが私に生産に英雄アーキテクチャのツアーをパッケージ化する方法を理解するためのリンクを与えることができれば、それは非常にいいだろう） おかげで、すべての

私systemjs.config.jsファイルにこれを追加することによって解決

EDIT 

問題：

map: { 
     'ng2-charts': 'node_modules/ng2-charts', 
    }, 
    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     "node_modules/ng2-charts": { 
     defaultExtension: 'js' 
     } 
    } 

いつか助けてくれることを願っています。

Answer 1

chart.jsのインポートをindex.htmlファイルのcdnリンクに変更し、他のものはすべてdocとして保存してください。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script> 

私のために働きます。これが役立つことを願っています:)あなたは、角CLI

"../node_modules/chart.js/dist/Chart.bundle.min.js" 

Answer 2

がsystem.config.jsでは、角度-cli.jsonでスクリプトのセクションにこれを追加し、私はマップするためにcharts.jsを追加する必要がありましたそれを実行させるためのパッケージ。

map: { 
    'ng2-charts': 'npm:ng2-charts', 
    'chart.js': 'npm:chart.js/dist/Chart.min.js', 
}, 
packages: { 
    'ng2-charts': { 
    main: './index.js', 
    defaultExtension: 'js' 
    }, 
    'chart.js': { 
    defaultExtension: 'js', 
    } 

} 

Answer 3

を使用している場合