Question

我正在使用angular2-highcharts component.ts文件如下：

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

@Component({
    selector: 'emotions',
    templateUrl: 'app/components/emotions/emotions.component.html',
    providers: [EmotionsService],
    directives: [CHART_DIRECTIVES]

})
export class EmotionsComponent {
    constructor(private emotionsService: EmotionsService) {
        this.options = {
            title : { text : 'simple chart' },
            series: [{
                data: [29.9, 71.5, 106.4, 129.2],
            }]
        };
    }
    options: HighchartsOptions;
}

在我的模板文件

中

<chart [options]="options"></chart>

package.json文件具有以下以及其他角度依赖项：

"dependencies": {
    "angular2-highcharts": "0.2.1"
  },

我已经运行npm install并且已在node_modules文件夹中安装了angular2-highcharts。

我收到以下错误：

zone.js:1274 GET http://localhost:3000/angular2-highcharts 404 (Not Found)

我尝试将systemjs.config.js文件更改为

map: {
            'angular2-highcharts': 'node_modules/angular2-highcharts'
}

但是，我开始收到以下错误：

zone.js:1274 GET http://localhost:3000/node_modules/angular2-highcharts/ 404 (Not Found)

如何解决此问题？

修改

我在system.config.js文件

中添加了此内容

map:{
'angular2-highcharts': 'node_modules/angular2-highcharts/node_modules/highcharts/index.js',
}

我收到以下错误

zone.js:1274 GET http://localhost:3000/node_modules/angular2-highcharts/dist/index 404 (Not Found)

我尝试更改index - ＆gt; index.js。它适用于它，但然后在其他js文件上给出相同的错误。

Answer 1

我做了以下事情：

<强> systemjs.config.js

map: {
            // our app is within the app folder
            app: 'app',
            'angular2-highcharts': 'node_modules/angular2-highcharts',
            'highcharts': 'node_modules/highcharts'
}

packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular2-highcharts': {
                main: './index.js',
                defaultExtension: 'js'
            },
            'highcharts': {
                defaultExtension: 'js'
            }
}

从组件文件中删除指令

在app.module.ts文件

中添加以下内容

import { CHART_DIRECTIVES } from 'angular2-highcharts';
@NgModule({
    declarations: [
        CHART_DIRECTIVES
    ],
})

将Highcharts与Angular 2一起使用时出错

1 个答案: