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

Difficult to tell :-( Could you add some traces or a breakpoint in the angular2-polyfills.js file on line 1243? Just to have more hints about the context. For example try to find out the parameters (fn, applyTo, applyWith) of the run function when the error occurs. Perhaps the "pause on exceptions" feature of your debugger could help you... I tried your code but I don't have the error at first sight. — Thierry Templier
– Thierry Templier, Commented Feb 26, 2016 at 18:20
@ThierryTemplier thanks for looking into it, I just made the debug and got that applyWith had the value "Unexpected token < Evaluating localhost:3000/ng2-charts/ng2-charts Error loading localhost:3000/app/main.js" so I added main.js and main.ts files into question — Peter Escamilla
– Peter Escamilla, Commented Feb 26, 2016 at 20:35
Checkout PrimeNG Charts as an alternative. primefaces.org/primeng/#/piechart — Cagatay Civici
– Cagatay Civici, Commented Feb 29, 2016 at 11:05

dalec · Accepted Answer · 2016-03-19 13:28:29Z

5

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

answered Mar 19, 2016 at 13:28

dalec

511 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Thierry Templier · Accepted Answer · 2016-02-26 20:42:02Z

0

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

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

answered Feb 26, 2016 at 20:42

Thierry Templier

203k44 gold badges407 silver badges366 bronze badges

4 Comments

Peter Escamilla Over a year ago

It seems the error is: "SyntaxError: Unexpected token < Evaluating localhost:3000/node_modules/ng2-charts/ng2-charts Error loading localhost:3000/app/main.js at eval (native) at SystemJSLoader.__exec (localhost:3000/node_modules/systemjs/dist/system.src.js:1395:16) at entry.execute (localhost:3000/node_modules/systemjs/dist/system.src.js:3521:16) at linkDynamicModule ..."

Thierry Templier Over a year ago

You should add en entry ng2-charts in the package block if you rely on the TypeScript sources of the library

Vikram Babu Nagineni Over a year ago

why map is needed in system.config? we are not adding like that for any other library?

Thierry Templier Over a year ago

Map is needed here since one JS file is provided by module and we want that their resolution (using the module name to deduce file name) were handled by SystemJS.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related