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

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:

我正在尝试为Angular 2获取高图,以便与我的项目一起工作。但是,当我将CHART_DIRECTIVES添加到@Component中的指令数组时,我在浏览器控制台中收到错误:

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

EXCEPTION:错误:未捕获(在承诺中):在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:

编辑:我正在尝试合并此图表包:https://www.npmjs.com/package/angular2-highcharts。我按照该网站上的说明添加了CHART_DIRECTIVES:

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

2 个解决方案

#1

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

我面临同样的问题。我能够通过升级我的应用程序来使用最新的RC版本的angular2来解决它。

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

最新版本0.1.0的angular2-highcharts现已升级到rc.1(RC版本)。

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.

我认为这是一个兼容性问题,即使您导入组件注释是从角度库导入的,它也无法识别它。您正在尝试使用较旧的angular2版本,而我们使用的angular2-highcharts基于最新版本的angular2,它有很多重大变化。

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

更改日志: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;
}

#2

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.

根据您的用例,似乎您没有从'./ng2-charts.ts'添加import {CHART_DIRECTIVES};这一行同时在.ts文件中输入图表。

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

除此之外,如果你打算使用angular2中的图表,你可以参考这里

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

如果主页上不存在Chart.js,则不会在Angular2中显示
Chart is not working in Angular2

图表在Angular2中不起作用

Working Example

#1