2016-04-18 11 views
1

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

enter image description here

Ich werde verwenden, um es in einer Komponente nicht enthält (später in einer gesonderten Richtlinie - nach bestem Ansatz)

enter image description here

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 

Antwort

0

Nach Chart.js wurde in der Version veröffentlicht 2.2.1 und Angular 2 ist um RC4 Es ist möglich, Diagramm zu verwenden.js in folgenden Weise:

//package.json 
"dependencies": { 
    "@angular/common": "2.0.0-rc.4", 
    "@angular/compiler": "2.0.0-rc.4", 
    "@angular/core": "2.0.0-rc.4", 
    "@angular/forms": "0.2.0", 
    "@angular/http": "2.0.0-rc.4", 
    "@angular/platform-browser": "2.0.0-rc.4", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.4", 
    "@angular/router": "3.0.0-beta.2", 
    "bootstrap": "3.3.7", 

    "chart.js": "2.2.1", 
    "...ETC" 

Import von node_modules:

//Index.html 
<script src="node_modules/chart.js/dist/Chart.js"></script> 

Verwendung in Aktion:

this.chart = new Chart(ctx, { type: 'line', data: data, options: chartOptions }); 

Mehr Details über in diesem Beitrag finden Sie unter "How to use": chart.js - Supplied parameters do not match any signature of call target (angular2)

+0

gibt es sowieso um die Zeile aus der index.html zu entfernen und in die systemjs.config.js Datei zu legen? – reza

+0

@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

1

ich die Bibliothek innerhalb SystemJS auf diese Weise konfigurieren würde, da die Bibliothek unterstützt Commonjs:

System.config({ 
    map: { 
    chart: 'node_modules/chart.js/dist/Chart.js' 
    }, 
    packages: { 
    (...) 
    } 
}); 

diese Weise werden Sie die Chart Objekt importieren können:

import Chart from 'chart'; 

(...) 
var myNewChart = new Chart(...); 
+0

Ich habe es so eingestellt: 'map: {'chart': 'node_modules/chart.js/dist/Chart.js'}' in meinem 'dashboard.component.ts' beschwert sich bei' Import Chart von 'Diagramm'; 'beschwert sich, dass ** Modul 'Diagramm' ** – meorfi

+0

und in der Browser-Konsole nicht finden kann: eine Menge von ' GET http: //localhost:3000/node_modules/chart.js/dist/charts/Chart.PolarArea 404 (nicht gefunden) ' ' GET http: // localhost: 3000/chartjs-color 404 (Nicht gefunden) ' ' GET http: //localhost:3000/node_modules/chart.js/dist/charts/Chart.Bar 404 (Nicht gefunden) ' – meorfi

+0

Das ist etwas komisch, da chart.js auf JS-Dateien angewiesen ist (geladen mit' require (...) ') die nicht im Ordner dist liegen :-( –