Ich bin neu zu angularjs (speziell eckig js2).SystemJS importieren chart.js in index.html
Ich bin verwirrt mit SystemJS importieren/Konfigurationen.
Ich habe meine Anwendung (angularjs2), die in Ordnung funktioniert. Ich entwickle es mit Visual Studio.
Ich habe die package.json eingerichtet, die in node_modules meine notwendigen Sachen lädt. In meinem Fall würde Ich mag chart.js verwenden
Ausschnitt aus package.json Datei
"dependencies": {
"angular2": "2.0.0-beta.15",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"systemjs": "^0.19.26",
"zone.js": "0.6.11",
"bootstrap": "3.3.6",
"jquery": "2.2.3",
"font-awesome": "4.5.0",
"toastr": "2.1.2",
"chart.js": "2.0.2"
},
In meinem Index.HTML ich habe folgendes:
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
$(document).ready(function() {
window.toastr = toastr;
setTimeout(function() {
toastr.options = {
closeButton: true,
progressBar: true,
showMethod: 'slideDown',
timeOut: 2500
};
toastr.success('Welcome to the APP');
}, 1300);
});
</script>
Wie Diagramm JS wird importiert:
<!-- ChartJS-->
<!--version1: OLD ChartJS importing WORKS ok-->
<!--<script src="scripts/plugins/chartJs/Chart.min.js"></script>-->
<!--version2: This kind of importing does not work-->
<script src="node_modules/chart.js/dist/Chart.min.js"></script>
Nicht e:
Ich habe ein toastr, die auch von node_modules auf diese Weise importiert wird:
<!-- Toastr -->
<script src="node_modules/toastr/build/toastr.min.js"></script>
Aber es funktioniert ok.
Der node_modules Ordner wird in meiner Lösung
Ich werde verwenden, um es in einer Komponente nicht enthält (später in einer gesonderten Richtlinie - nach bestem Ansatz)
Bei dieser Linie
var myNewChart = new Chart(ctx).Line(lineData, options);
es beschwert sich über:
ReferenceError: Chart is not defined
at DashboardComponent.execute.DashboardComponent.createLinearChart
gibt es sowieso um die Zeile aus der index.html zu entfernen und in die systemjs.config.js Datei zu legen? – reza
@reza, kann das nicht beantworten. Ich wechselte zu Webpack und ich benutze Anbieter-Datei für die Injektion von 3rd-Party-Bibliotheken. Vielleicht ist die Antwort von Thierry für dich in Ordnung? – meorfi