Angular 2 & ng2-charts：（SystemJS）导入了意外的指令“BaseChartComponent”答案

【问题标题】：Angular 2 & ng2-charts: (SystemJS) Unexpected directive 'BaseChartComponent' importedAngular 2 & ng2-charts：（SystemJS）导入了意外的指令“BaseChartComponent”
【发布时间】：2016-10-25 00:57:05
【问题描述】：

我正在尝试使用 Node.js 后端让 ng2-charts 模块与我的 Angular 2 应用程序一起使用。这是我的app.module.ts 文件

import {NgModule} from "@angular/core";
import {BrowserModule} from "@angular/platform-browser";
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import AppComponent from "./app.component";
import TwitterService from "./twitter.service";
import BarGraphComponent from "./bar-graph.component";
import LineGraphComponent from "./line-graph.component";
import {CHART_DIRECTIVES } from "ng2-charts";
import {DataService} from "./data.service";

@NgModule({
    imports: [BrowserModule, FormsModule, HttpModule ],
    declarations: [AppComponent, BarGraphComponent, LineGraphComponent, CHART_DIRECTIVES],
    bootstrap: [AppComponent],
    providers: [TwitterService, DataService]
})
export default class AppModule { }

当我运行应用程序时，我在浏览器控制台中收到的消息如下：

所以我在node_modules/ng2-charts/ng2-charts.js 做了一些探索，这就是我所看到的：

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
var charts_1 = require('./components/charts/charts');
__export(require('./components/charts/charts'));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {
    directives: [
        charts_1.CHART_DIRECTIVES
    ]
};

然后我去components/charts/charts.js，这是代码的最后一行

exports.CHART_DIRECTIVES = [BaseChartComponent];

我该如何解决这个问题？

POST-EDIT - 我更改了app.module.ts，所以CHART_DIRECTIVES 现在位于declarations，这是我得到的新错误：

这是 app.component.ts 的代码 --- 请记住，在我尝试添加 chart.js 和 ng2-charts.js 之前，这不是问题

app.component.ts

import {Component, OnInit} from "@angular/core";
import {DataService} from "./data.service";
import TwitterService from "./twitter.service";
import {IoToken} from "./di";
import * as io from "socket.io-client";

@Component({
    selector: "app",
    templateUrl: "/app/app.component.html",
    providers: [TwitterService, DataService, {provide: IoToken, useValue: io}]
})

export default class AppComponent implements OnInit {
    topWords = this.data.topWords;
    topWordsCount = this.data.topWordsCount;
    topHashtags = this.data.topHashtags;
    topHashtagsCount = this.data.topHashtagsCount;
    tweets = this.data.tweets;
    tweetsOverTime = this.data.tweetsOverTime;

    getTweetCount = () => this.data.totalCount;

    constructor(private twitter: TwitterService, private data: DataService) {}

    ngOnInit(){
        this.data.setSource(this.twitter.startStreaming());
    }
}

【问题讨论】：

指令和组件应该放在declarations，而不是imports
好的，我这样做了，现在我得到一个新的错误。我已将问题放在上述问题中。
您从未将DataService 添加到providers
这样做了，还是一样的问题。

标签： angular chart.js systemjs ng2-charts

【解决方案1】：

从上面提到的代码中，我了解到您正在从 Module 中的 ng2-charts 库中导入指令。

这可能是您遇到错误的原因。

尝试导入模块：

import { ChartsModule } from 'ng2-charts/ng2-charts';

// In your App's module:
imports: [
   ChartsModule
]

希望这会有所帮助。

【讨论】：

除了 ChartsModule 将不起作用，因为这不是要导出的内容。我已经试过了。
@LesPaul 您是否尝试过在您的项目中更新 node_module？

【解决方案2】：

我遇到了同样的问题。我将此添加到我的system.config.js 文件以解决问题：

map: {
ng2-charts':                'npm:ng2-charts'
'ng2-charts': {
          defaultExtension: 'js'
      }

【讨论】：

别管糟糕的格式，这甚至不是有效的语法。