我最近从角度测试版14转到使用Angular2 RC4。我试图使用angular2-highcharts但在设置指令时得到错误。我尝试使用谷歌图表,也遇到了完全相同的错误:
Angular2:EXCEPTION:错误:未捕获(在承诺中):TypeError:无法读取未定义的属性'annotationCls'
这是我的图表组件:
import {Component, OnInit} from '@angular/core';
import { ChartModule } from 'angular2-highcharts';
@Component({
selector: 'bar-chart-demo',
templateUrl: 'app/components/dash-features/charts/my-chart.html'
directives: [ChartModule]
})
export class Charting {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129.2],
}]
};
}
options: HighchartsOptions;
}
图表html:
<chart [options]="options"></chart>
和system.config.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': '/node_modules/rxjs',
'angular2-in-memory-web-api': '/node_modules/angular2-in-memory-web-api',
'@angular': '/node_modules/@angular',
'highcharts/highstock.src': '/node_modules/highcharts/highstock.js',
'angular2-highcharts': '/node_modules/angular2-highcharts',
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
'angular2-highcharts': { main: 'index.js', defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
System.import('app/main')
.then(null, console.error.bind(console));