使用带有角2的高图时的错误

Question

我正在使用Angular2-高图表，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和angular2-高级图表已经安装在node_modules文件夹中。

我得到以下错误：

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