角度2和ng2-charts：（SystemJS）导入了意外指令'BaseChartComponent' [英] Angular 2 & ng2-charts: (SystemJS) Unexpected directive 'BaseChartComponent' imported

问题描述

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

I am trying to get the ng2-charts module to work with my Angular 2 application using a Node.js back-end. This is my app.module.ts file

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

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

When I run the application, the message I get in my browser console is the following:

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

So I did some exploring in node_modules/ng2-charts/ng2-charts.js and this is what I see:

"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 ，这是代码的最后一行

I then go to components/charts/charts.js, and this is the last line of the code

exports.CHART_DIRECTIVES = [BaseChartComponent];

如何解决此问题？

后期编辑-我更改了 app.module.ts ，因此 CHART_DIRECTIVES 现在位于声明，这是我收到的新错误：

POST-EDIT - I changed app.module.ts so CHART_DIRECTIVES is now in declarations and this is the new error I get:

这是 app.component.ts 的代码---请记住，直到出现此问题我试图添加 chart.js 和 ng2-charts.js

This is the code for app.component.ts --- keep in mind, this was not an issue until I tried to add chart.js and 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());
    }
}

推荐答案

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

I had the same problem. I added this to my system.config.js file to fix the problem:

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

这篇关于角度2和ng2-charts：（SystemJS）导入了意外指令'BaseChartComponent'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！