我正在使用Typescript / Angular2前端框架和Node.js后端构建一个Twitter类型的应用程序。我正在关注Levi Botelho的 Angular 2 Projects 视频教程中的代码,尽管我没有使用他的Gulpfile
,而是使用systemjs.config.js
运行应用程序。
我正在将Chart.js注入我的systemjs.config.js
文件中,并且我还在index.html
中包含了一个。但是,我不能使Chart.js在我的应用程序中工作,我一直在尝试不同的解决方案,并且我在浏览器控制台中不断出现错误。我在./node_modules
文件夹中包含了所有Chart.js文件。
我将展示我尝试的不同变体以及我收到的错误消息,但这里是index.html和systemjs.config.js中的代码没有 Chart.js :
的index.html
<html>
<head>
<title>Angular 2 Twitter</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous" />
<!-- inject:css -->
<!-- endinject -->
<script src="/socket.io/socket.io.js"></script>
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
</head>
<body>
<script src="/frontend/systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<app>Loading...</app>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'moment': 'npm:moment',
'socket.io-client': 'npm:socket.io-client',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
'chart.js': 'npm:chart.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
'rxjs': {
defaultExtension: 'js'
},
'moment': {
main: './moment.js',
defaultExtension: 'js'
},
'socket.io-client': {
main: './socket.io.js',
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
编辑:稍后添加问题 ---这是我的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";
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule],
declarations: [AppComponent, BarGraphComponent, LineGraphComponent],
bootstrap: [AppComponent],
providers: [TwitterService]
})
export default class AppModule { }
编辑 - 后来又添加了问题 ---这是我的package.json文件:
{
"name": "angular-2-twitter",
"version": "1.0.0",
"scripts": {
"start": "nodemon server.js",
"typings": "typings"
},
"devDependencies": {
"browser-sync": "^2.16.0",
"browserify": "^13.1.0",
"gulp": "^3.9.1",
"gulp-cached": "^1.1.0",
"gulp-concat": "^2.6.0",
"gulp-htmlmin": "^2.0.0",
"gulp-if": "^2.0.1",
"gulp-inject": "^4.1.0",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-tslint": "^6.1.1",
"gulp-uglify": "^2.0.0",
"lite-server": "^2.2.2",
"tsify": "^1.0.7",
"tslint": "^3.15.1",
"typescript": "^1.8.10",
"concurrently": "^3.0.0",
"typings": "^1.4.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"yargs": "^5.0.0"
},
"dependencies": {
"@angular/common": "~2.0.1",
"@angular/compiler": "~2.0.1",
"@angular/core": "~2.0.1",
"@angular/forms": "~2.0.1",
"@angular/http": "~2.0.1",
"@angular/platform-browser": "~2.0.1",
"@angular/platform-browser-dynamic": "~2.0.1",
"@angular/router": "~3.0.1",
"@angular/upgrade": "~2.0.1",
"angular-in-memory-web-api": "~0.1.1",
"bootstrap": "^3.3.7",
"chart.js": "^2.2.2",
"compression": "^1.6.2",
"core-js": "^2.4.1",
"express": "^4.14.0",
"moment": "^2.15.0",
"reflect-metadata": "^0.1.8",
"requirejs": "^2.3.2",
"rxjs": "5.0.0-beta.12",
"socket.io-client": "^1.4.8",
"systemjs": "0.19.39",
"twit": "^2.2.4",
"zone.js": "^0.6.25"
}
}
以下是我试图在我的代码中包含的两个图表文件之一,第二个与此非常相似:
杆graph.component.ts
import {Component, ElementRef, Input, AfterViewInit, ViewChild} from '@angular/core';
import * as Chart from "chart.js";
@Component({
selector: "bar-graph",
templateUrl: "/app/graph.component.html"
})
export default class BarGraphComponent implements AfterViewInit {
@ViewChild("canvas") private canvas: ElementRef;
@Input() private data: Array<number>;
@Input() private labels: Array<string>;
ngAfterViewInit(){
const chart = new Chart(this.canvas.nativeElement.getContext("2d"), {
type: "bar",
data: {
labels: this.labels,
datasets: [{
label: "Count",
data: this.data,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)"
],
borderColor: [
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
"rgba(255,99,132,1)",
"rgba(54, 162, 235, 1)"
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
setInterval(function () {
(chart as any).update();
}, 1000);
}
}
然后我开始将Chart.js包含到我的代码中,我收到错误。当我将Chart.js添加到systemjs.config.js
时,如此:
'chart.js': {
main: './src/chart.js',
defaultExtension: 'js'
}
然后我收到此错误:
然后在systemjs.config.js
中我包含了chartjs-color:
map: {
.......
'chart.js': 'npm:chart.js',
'chartjs-color': 'npm:chartjs-color'
}
packages: {
......
'chartjs-color': {
main: './index.js',
defaultExtension: 'js'
}
}
然后我得到了这个,因此开始试图在systemjs.config.js
找到解决方案的兔子洞
然后我从systemjs.config.js
删除了chartjs-color,因为我还是没有注入它,根据this StackOverflow question的接受答案,我在index.html
文件中包含了这一行:< / p>
<script src="node_modules/chart.js/dist/Chart.bundle.js"></script>
我明白了:
所以我将chartjs-color链接添加到我的index.html
文件中,我得到了这个:
此时,我已经放弃了。关于如何解决这个问题的任何建议都非常感谢。
答案 0 :(得分:2)
我在Chart.js
应用中使用Angular 2
,无需向chartjs-color
system.config.js
路径
首先:
npm --version
如果版本不是3.x.x
,请升级到latest Node/npm,然后:
npm --version
并查看它3+
npm install
npm rebuild
再次检查。如果你仍然在OP中得到错误:
npm install chartjs-color chartjs-color-string
有关我的设置的详细信息:
这是我在systemjs.config.js
paths: {'npm:' : 'node_modules/'},
map: {'chart.js' : 'npm:chart.js'},
packages: { 'chart.js' : { main:'./dist/Chart.js', defaultExtension: 'js'} }
这是我在自定义指令中导入库的方法:
import 'chart.js';
从那里,我可以使用Chart
对象。为了防止Typescript引发错误,我还有一个custom.typings.d.ts
文件,其中包含:
declare var Chart:any;
此定义文件包含一些与我的应用相关的自定义定义。我在main.ts
中添加了对这些定义的引用,其中包含:
///<reference path="relative/path/to/custom.typings.d.ts"/>
答案 1 :(得分:0)
您需要导入 ChartsModule
,如下所示 @NgModule
,
import { ChartsModule } from 'ng2-charts/ng2-charts';
// In your App's module:
@NgModule({
imports: [
ChartsModule
]
...
})
更多信息:Promises
注意:为了简单起见,请将'chart.js':'npm:chart.js'
更改为适当的名称,如ng2-charts
:https://github.com/valor-software/ng2-charts/blob/master/demo/index.ts所示。