Я создаю приложение типа Twitter с интерфейсной платформой Typcript/Angular2 и коннектором Node.js. Я следую коду из проекта Levi Botelho's Angular 2 Projects, но я не использую его Gulpfile, но вместо этого запускаю приложение, используя systemjs.config.js.Chart.js вызывает ошибку Angular 2
Я вводил Chart.js в свой файл systemjs.config.js, и я также включаю a в index.html. Тем не менее, я не могу заставить Chart.js работать в моем приложении, я продолжаю пробовать разные решения, и я продолжаю получать ошибки в консоли браузера. У меня есть все файлы Chart.js в папке ./node_modules.
Я покажу различные варианты я пробовал и сообщения об ошибках, которые я получил, но вот код в 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);
EDIT: Добавлен вопрос позже --- А это мой 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 { }
EDIT - Также добавлено к вопросу позже --- Вот мой 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-цвет:
map: {
.......
'chart.js': 'npm:chart.js',
'chartjs-color': 'npm:chartjs-color'
}
packages: {
......
'chartjs-color': {
main: './index.js',
defaultExtension: 'js'
}
}
Итак я получаю это , и, таким образом, начинается отверстие кролика, пытаясь найти решение в systemjs.config.js
Так я удалить chartjs-цвет из systemjs.config.js, потому что я не вводить его в любом случае, и в принятом ответе на this StackOverflow question я включил эту строку в моем index.html файле:
<script src="node_modules/chart.js/dist/Chart.bundle.js"></script>
I получить это:
Так что я добавить ссылку chartjs-цвет моей index.html файл, и я получаю это:
На данный момент, я отказался. Любые советы по устранению этой проблемы очень приветствуются.
Как выглядит ваш '@ NgModule'? Добавляете ли вы требуемые директивы в свойствах метаданных импорта, если используете RC5 или более позднюю версию ??? – micronyks
Добавил файл app.module.ts с помощью @NgModule, чтобы показать вам, что у меня там есть. Я не знаю, использую ли я RC4 или RC5, я также включил файл package.json, чтобы вы могли видеть, что у меня есть: –