Search code examples
visual-studioangularnode-modulessystemjs

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

enter image description here

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

enter image description here

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
Solution

  • 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)