0

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());
    }
}
4

2 に答える 2

0

私も同じ問題を抱えていました。system.config.js問題を解決するために、これをファイルに追加しました。

map: {
ng2-charts':                'npm:ng2-charts'
'ng2-charts': {
          defaultExtension: 'js'
      }
于 2016-12-23T16:58:52.313 に答える
0

上記のコードから、モジュール内の ng2-charts ライブラリからディレクティブをインポートしていることがわかります。

おそらくこれがエラーの原因です。

モジュールをインポートしてみてください:

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

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

お役に立てれば。

于 2016-10-25T04:58:37.623 に答える