Ich baue eine Twitter-Anwendung mit einem Typescript/Angular2-Front-End-Framework und einem Node.js-Back-End. Ich folge dem Code von Levi Botelho Angular 2 Projects Video-Tutorial, obwohl ich nicht seine Gulpfile verwenden, sondern die Anwendung mit systemjs.config.js läuft.Chart.js verursacht Angular 2-Fehler
Ich injiziere Chart.js in meine systemjs.config.js Datei und ich schließe auch eine in index.html ein. Allerdings kann ich Chart.js nicht in meiner Anwendung verwenden. Ich versuche weiterhin verschiedene Lösungen und erhalte immer wieder Fehler in meiner Browserkonsole. Ich habe alle Chart.js-Dateien in meinem Ordner ./node_modules.
Ich werde die verschiedenen Variationen zeigen, dass ich versucht habe, und die Fehlermeldungen, die ich bekommen habe, aber hier ist der Code in index.html und systemjs.config.js die ohne Chart.js funktioniert:
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);
EDIT: Hinzugefügt später --- Und das ist meine app.module.ts Datei in Frage zu stellen:
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 { }
EDIT - auch hinzugefügt, um die Frage später --- Hier ist meine package.json Datei:
{
"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"
}
}
dies ist eines von zwei Diagramm Dateien, die ich in meinem Code enthalten versuche, die zweite ein sehr ähnlich wie diese:
Bar-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);
}
}
Dann beginne ich Chart.js in meinen Code zu schließen und ich Fehler bekommen. Wenn ich Chart hinzufüge.js in systemjs.config.js wie so:
'chart.js': {
main: './src/chart.js',
defaultExtension: 'js'
}
Dann bekomme ich diesen Fehler:
Also dann in systemjs.config.js I chartjs-Farbe umfassen:
map: {
.......
'chart.js': 'npm:chart.js',
'chartjs-color': 'npm:chartjs-color'
}
packages: {
......
'chartjs-color': {
main: './index.js',
defaultExtension: 'js'
}
}
Also dann bekomme ich diese und damit beginnt das Kaninchenloch zu versuchen, eine Lösung in systemjs.config.js
Also ich chartjs-Farbe von systemjs.config.js entfernen, weil ich es nicht sowieso injizieren, und je der akzeptierten Antwort auf this StackOverflow question enthalten ich diese Zeile in meiner index.html Datei:
<script src="node_modules/chart.js/dist/Chart.bundle.js"></script>
I erhalten diese:
So füge ich die chartjs-Farbe Link zu meinem index.html-Datei, und ich diese:
An diesem Punkt habe ich aufgegeben. Jeder Rat zur Lösung dieses Problems wird sehr geschätzt.
Wie sieht Ihr '@ NgModule' aus? Fügen Sie Require-Anweisungen in der Import-Meta-Eigenschaft hinzu, wenn RC5 oder eine neuere Version verwendet wird ??? – micronyks
Meine app.module.ts Datei mit dem @NgModul hinzugefügt, um Ihnen zu zeigen, was ich dort habe. Ich weiß nicht, ob ich RC4 oder RC5 benutze, ich habe auch meine package.json-Datei beigefügt, damit Sie sehen können, was ich habe: –