SystemJS import chart.js in index.html

问题

I am new to angularjs (specially angular js2).

I am confused with SystemJS importing / configurations.

I have my application (angularjs2) which works ok. I am developing it with Visual Studio.

I have set up the package.json which loads in node_modules my necessary stuff. In my case I would like to use chart.js

snippet from package.json file

"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"    
  },

In my Index.html I have the following :

<!-- 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>

How Chart JS is imported:

 <!-- 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>

Note:

I have a toastr which is also imported from node_modules in this way:

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

But it is working ok.

The node_modules folder is not included in my solution

I am going to use it in a component (later in a separate directive - according to best approach)

At that line

var myNewChart = new Chart(ctx).Line(lineData, options);

it is complaining about:

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

回答1:

I would configure the library within SystemJS this way since the library supports CommonJS:

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

This way you will be able to import the Chart object:

import Chart from 'chart';

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

回答2:

After Chart.js was released in version 2.2.1 and Angular 2 is at RC4 It is possible to use chart.js in following manner:

//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"

Import from node_modules:

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

Use in action:

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

More details about "How to use" see in this post: chart.js - Supplied parameters do not match any signature of call target (angular2)

来源：https://stackoverflow.com/questions/36693803/systemjs-import-chart-js-in-index-html

标签

visual-studio

angular

node-modules

systemjs