Angular 2的高图表-在ChartComponent上找不到指令注释

Question

I'm trying to get highcharts for Angular 2 to work with my project. However, when I add the CHART_DIRECTIVES to my directives array in @Component , I get the error in my browser console:

EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on ChartComponent

Does anyone know what this means and how to go about fixing this??

EDIT: I'm trying to incorporate this chart package: https://www.npmjs.com/package/angular2-highcharts . I added CHART_DIRECTIVES by following the instructions on that site with:

import {Http, Headers, Response, HTTP_PROVIDERS} from 'angular2/http';
import {Component, Injectable} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Router} from 'angular2/router';
import {Observable} from 'rxjs/Rx';
import {Routes} from '../routes.config';

import { CHART_DIRECTIVES } from 'angular2-highcharts';

@Component({
    selector: 'home',
    templateUrl: './app/home/home.html',
    directives: [CHART_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
    providers: [
        HTTP_PROVIDERS
    ]
})

Answer 1

According to your use case it seems you havn't add import {CHART_DIRECTIVES} from './ng2-charts.ts'; this line while imorting chart in your .ts file.

Apart from this if you are going to use charts in angular2 you can Refer here

• Chart.js not showing in Angular2 if it doesn't exist on the main page

• Chart is not working in Angular2

Working Example

Answer 2

I was facing the same issues. I was able to resolve it by upgrading my application to use the latest RC version of angular2.

The latest release 0.1.0 of angular2-highcharts is now upgraded to the rc.1 (RC version).

I think it's a compatibility issue here even though you import the Component annotation is imported from angular library, it fails to identify it. You are trying to use an older angular2 version while the angular2-highcharts that we use is based on the latest release of angular2 which has a lot of breaking changes.

Change Log: https://github.com/angular/angular/blob/master/CHANGELOG.md

/// <reference path="../../../../node_modules/angular2/typings/browser.d.ts" />

import {Component} from '@angular/core';
import {CHART_DIRECTIVES} from 'angular2-highcharts';

@Component({
    selector: 'simple-chart',
    directives: [CHART_DIRECTIVES],
    templateUrl: 'templates/simple_chart.html'
})
export class SimpleChart {
    constructor() {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: Object;
}