index.htmlのSystemJS import chart.js

Question

私はangularjs（特に角度js2）を初めて使っています。

SystemJSのインポート/設定と混同しています。

私は自分のアプリケーション（angularjs2）が正常に動作します。私はVisual Studioでそれを開発しています。

node_modulesに必要なものをロードするpackage.jsonをセットアップしました。

<!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 

     System.import('app/main') 
       .then(null, console.error.bind(console)); 

     $(document).ready(function() { 
      window.toastr = toastr; 
      setTimeout(function() { 
       toastr.options = { 
        closeButton: true, 
        progressBar: true, 
        showMethod: 'slideDown', 
        timeOut: 2500 
       }; 
       toastr.success('Welcome to the APP'); 

      }, 1300); 
     }); 
    </script> 

どうチャート：私は、次のしているpackage.jsonファイル私のIndex.htmlとは

"dependencies": { 
    "angular2": "2.0.0-beta.15", 
    "es6-shim": "^0.35.0", 
    "reflect-metadata": "0.1.2", 
    "rxjs": "5.0.0-beta.2", 
    "systemjs": "^0.19.26", 
    "zone.js": "0.6.11", 
    "bootstrap": "3.3.6", 
    "jquery": "2.2.3", 
    "font-awesome": "4.5.0", 
    "toastr": "2.1.2", 
    "chart.js": "2.0.2"  
    }, 

からchart.jsに

スニペットを使用したい私の場合は JSはインポートされます：

<!-- ChartJS--> 
<!--version1: OLD ChartJS importing WORKS ok--> 
<!--<script src="scripts/plugins/chartJs/Chart.min.js"></script>--> 

<!--version2: This kind of importing does not work--> 
<script src="node_modules/chart.js/dist/Chart.min.js"></script> 

E：

<!-- Toastr --> 
    <script src="node_modules/toastr/build/toastr.min.js"></script> 

しかし、それは大丈夫働いている：

私はまた、このようにnode_modulesから輸入された toastr を持っています。

node_modulesフォルダは、私が（後で別のディレクティブで - 最善のアプローチに応じて）コンポーネントでそれを使用するつもりです私の溶液中で

が含まれていません

この行のところに

文句を言っている：

ReferenceError: Chart is not defined 
    at DashboardComponent.execute.DashboardComponent.createLinearChart 

Answer 1

の後にChart.jsがバージョンでリリースされました2.2.1および角度2はです。RC4チャートを使用することができます。JS次のように：

//package.json 
"dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.2", 
    "bootstrap": "3.3.7", 

    "chart.js": "2.2.1", 
    "...ETC" 

node_modulesからインポート：アクションで

//Index.html 
<script src="node_modules/chart.js/dist/Chart.js"></script> 

使用：この記事で見る "使用方法" について

this.chart = new Chart(ctx, { type: 'line', data: data, options: chartOptions }); 

詳細：chart.js - Supplied parameters do not match any signature of call target (angular2)

Answer 2

ライブラリはCommonJSをサポートしていますので、私はSystemJS以内にこのようにライブラリを設定します：

System.config({ 
    map: { 
    chart: 'node_modules/chart.js/dist/Chart.js' 
    }, 
    packages: { 
    (...) 
    } 
}); 

あなたがChartオブジェクトをインポートすることができるようになります。この方法は：

import Chart from 'chart'; 

(...) 
var myNewChart = new Chart(...);