Charts 在angular2项目上使用ng2图表显示angular2多边形填充的错误

当我尝试使用基于angular2的ng2图表，并使用从angular2开始的5分钟时，我得到了以下错误，这对我没有任何指导意义：

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

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

}

带多边形填充断点的应用程序：

“意外令牌<评估加载错误”

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

---

您需要在SystemJS配置中添加映射项：

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

---

如果您使用SystemJS和npm，您应该这样配置

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

---

很难说：-（您能否在第1243行的

angular2 polyfills.js

文件中添加一些跟踪或断点？只是为了获得有关上下文的更多提示。例如，在出现错误时尝试找出run函数的参数（fn、applyTo、applyWith）。可能是“暂停异常”调试器的功能可以帮助您…我尝试了您的代码，但一眼就看不出错误。@ThierryTemplier感谢您的研究，我刚刚进行了调试，得到的applyWith值为“意外令牌<评估错误加载”因此，我将main.js和main.ts文件添加到questionCheckout素数图表中作为替代。错误似乎是：“SyntaxError:Unexpected token<在SystemJSLoader的eval（本机）处评估错误加载。u exec（）在entry.execute（）在linkDynamicModule处执行…”如果您依赖library的TypeScript源，那么应该在包块中添加en entry ng2图表为什么system.config中需要映射？我们不会像其他库那样添加映射？这里需要映射，因为模块提供了一个JS文件，我们希望它们的分辨率（使用模块名推断文件名）由SystemJS处理。

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

bootstrap(AppComponent);

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

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