Using ng2-charts on angular2 project shows an error with angular2-polyfills

Question

When I'm trying to use ng2-charts based from http://valor-software.com/ng2-charts/ and using 5 mins getting started from angular2 I'm getting the following error which guides me no where:

SyntaxError: Unexpected token <(…)Zone.run @ angular2-polyfills.js:1243
angular2-polyfills.js:1152 DEPRECATION WARNING: 'dequeueTask' is no
longer supported and will be removed in next major release. Use 
removeTask/removeRepeatingTask/removeMicroTask

The project runs fine, the package.json is:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.7",
    "systemjs": "0.19.22",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.5.15",
    "ng2-charts": "~1.0.0-beta.0"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.7.5",
    "typings": "^0.6.8"
  }
}

app.component.ts

import {Component, } from 'angular2/core';
import {JSONP_PROVIDERS}  from 'angular2/http';
import {ConsumerService} from './consumers/url.consumer.service';
import {Observable} from "rxjs/Observable";
import {HTTP_PROVIDERS} from "angular2/http";
import {Hero} from "./Billing"
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
// webpack html imports
let template = require('./line-chart-demo.html');

@Component({
    selector: 'my-app',
    template: template,
    providers:[HTTP_PROVIDERS, JSONP_PROVIDERS, ConsumerService, CHART_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class AppComponent {

    constructor (private _consumerService: ConsumerService) {}

    items: Observable<Hero[]>;

    search (term: String) {
    this.items = this._consumerService.getHeroes();
    }


    // lineChart
    private lineChartData:Array<any> = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90],
    [18, 48, 77, 9, 100, 27, 40]
    ];
    private lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
    private lineChartSeries:Array<any> = ['Series A', 'Series B', 'Series C'];
    private lineChartOptions:any = {
    animation: false,
    responsive: true,
    multiTooltipTemplate: '<%if (datasetLabel){%><%=datasetLabel %>: <%}%><%= value %>'
    };
    private lineChartColours:Array<any> = [
    { // grey
        fillColor: 'rgba(148,159,177,0.2)',
        strokeColor: 'rgba(148,159,177,1)',
        pointColor: 'rgba(148,159,177,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(148,159,177,0.8)'
    },
    { // dark grey
        fillColor: 'rgba(77,83,96,0.2)',
        strokeColor: 'rgba(77,83,96,1)',
        pointColor: 'rgba(77,83,96,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(77,83,96,1)'
    },
    { // grey
        fillColor: 'rgba(148,159,177,0.2)',
        strokeColor: 'rgba(148,159,177,1)',
        pointColor: 'rgba(148,159,177,1)',
        pointStrokeColor: '#fff',
        pointHighlightFill: '#fff',
        pointHighlightStroke: 'rgba(148,159,177,0.8)'
    }
    ];
    private lineChartLegend:boolean = true;
    private lineChartType:string = 'Line';

    private randomize() {
    let _lineChartData = [];
    for (let i = 0; i < this.lineChartData.length; i++) {
        _lineChartData[i] = [];
        for (let j = 0; j < this.lineChartData[i].length; j++) {
            _lineChartData[i].push(Math.floor((Math.random() * 100) + 1));

        }
    }
    this.lineChartData = _lineChartData;
    }

    // events
    chartClicked(e:any) {
    console.log(e);
    }

    chartHovered(e:any) {
    console.log(e);
    }

}

index.html

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>

    <!-- http calls -->
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

    <!-- charts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
    map: {
      'ng2-charts': 'node_modules/ng2-charts'
    },
    packages: {
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
      });
      System.import('app/main')
        .then(null, console.error.bind(console));
    </script>

  </head>

  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

polyfills.js

1236=>    Zone.prototype.run = function (fn, applyTo, applyWith) {
        applyWith = applyWith || [];
        var oldZone = global.zone;
        // MAKE THIS ZONE THE CURRENT ZONE
        global.zone = this;
        try {
            this.beforeTask();
            return fn.apply(applyTo, applyWith);
        }
        catch (e) {
            if (this.onError) {
                this.onError(e);
            }
            else {
                throw e;
            }
        }
        finally {
            this.afterTask();
            // REVERT THE CURRENT ZONE BACK TO THE ORIGINAL ZONE
            global.zone = oldZone;
        }
    };

applyWith in polyfills breakpoint:

"Unexpected token < Evaluating http://localhost:3000/ng2-charts/ng2-charts Error loading http://localhost:3000/app/main.js"

main.js:

System.register(['angular2/platform/browser', './app.component', 'rxjs/Rx'], function(exports_1, context_1) {
    "use strict";
    var __moduleName = context_1 && context_1.id;
    var browser_1, app_component_1;
    return {
    setters:[
        function (browser_1_1) {
            browser_1 = browser_1_1;
        },
        function (app_component_1_1) {
            app_component_1 = app_component_1_1;
        },
        function (_1) {}],
    execute: function() {
        browser_1.bootstrap(app_component_1.AppComponent);
    }
    }
});
//# sourceMappingURL=main.js.map

main.ts:

import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import 'rxjs/Rx';

bootstrap(AppComponent);

Answer 1

if you use SystemJS and npm, you should config like this.

  System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      },
      'ng2-charts': {
        defaultExtension: 'js'
      }
    },
    map: {
      'ng2-charts': 'node_modules/ng2-charts'
    }
  });
  System.import('app/main')
        .then(null, console.error.bind(console));

Answer 2

You need to add a map entry in your SystemJS configuration:

System.config({
  map: {
     'ng2-charts': 'node_modules/ng2-charts'
  },
  packages: {
    …
  }
});