当我尝试使用基于 http://valor-software.com/ng2-charts/的 ng2 图表并使用 5 分钟从 angular2 开始时，我收到以下错误，该错误不会引导我：
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
该项目运行良好，package.json 是：
{
"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);
}
}
索引.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>
填充物.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;
}
};
应用在多填充断点中：
"正在评估 http://localhost:3000/ng2-charts/ng2-charts 加载 http://localhost:3000/app/main.js 时出现意外<令牌">
主.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
主要.ts：
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
import 'rxjs/Rx';
bootstrap(AppComponent);
如果你使用 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));
您需要在 SystemJS 配置中添加一个映射条目：
System.config({
map: {
'ng2-charts': 'node_modules/ng2-charts'
},
packages: {
…
}
});