问题
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:
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
]
};
I then go to components/charts/charts.js
, and this is the last line of the code
exports.CHART_DIRECTIVES = [BaseChartComponent];
How can I fix this issue?
POST-EDIT - I changed app.module.ts
so CHART_DIRECTIVES
is now in declarations
and this is the new error I get:
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());
}
}
回答1:
From the code mentioned above , what I understand is you are importing directives from ng2-charts library inside Module.
probably this is the cause you are having error.
Try importing module :
import { ChartsModule } from 'ng2-charts/ng2-charts';
// In your App's module:
imports: [
ChartsModule
]
Hope this helps.
回答2:
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'
}
来源:https://stackoverflow.com/questions/40229769/angular-2-ng2-charts-systemjs-unexpected-directive-basechartcomponent-imp