Chart.js导致Angular 2错误
我正在使用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文件中，我得到了这个：
此时，我已经放弃了。关于如何解决这个问题的任何建议都非常感谢。
2 个答案:
答案 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所示。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？