highcharts for Angular 2 - No Directive annotation found on 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
    ]
})

have you add this import line in your file `import {CHART_DIRECTIVES} from './ng2-charts.ts';` ? — Pardeep Jain, May 23 '16 at 06:44
Are you saying the 'highcharts' package is obsolete? I'm completely new to Angular 2. Is there a way to update it via npm? — Roka545, May 23 '16 at 13:57

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

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

Working Example

edited May 23 '17 at 11:46

Community

1
1

answered May 23 '16 at 06:55

Pardeep Jain

84,110
37
165
215

I'm trying to incorporate this chart package: https://www.npmjs.com/package/angular2-highcharts. – Roka545 May 23 '16 at 08:48
could you recreate your problem on plunker ? – Pardeep Jain May 23 '16 at 08:54

score 0 · Accepted Answer · answered Jun 02 '16 at 10:09

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

highcharts for Angular 2 - No Directive annotation found on ChartComponent

2 Answers2