SystemJS импортирует chart.js в index.html

Я новичок в angularjs (особенно angular js2).

Я запутался с импортом/конфигурацией SystemJS.

У меня есть приложение (angularjs2), которое работает нормально. Я разрабатываю его с помощью Visual Studio.

Я настроил package.json, который загружает в node_modules все необходимое. В моем случае я хотел бы использовать chart.js

фрагмент из файла package.json

"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"    
  },

В моем Index.html у меня есть следующее:

<!-- 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>

Как импортируется Chart JS:

 <!-- 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>

Примечание:

У меня есть toastr, который также импортируется из node_modules следующим образом:

   <!-- Toastr -->
    <script src="node_modules/toastr/build/toastr.min.js"></script>

Но работает нормально.

Папка node_modules не включена в мое решение

введите здесь описание изображения

Я собираюсь использовать его в компоненте (позже в отдельной директиве - в соответствии с лучшим подходом)

введите здесь описание изображения

На этой линии

var myNewChart = new Chart(ctx).Line(lineData, options);

он жалуется на:

ReferenceError: Chart is not defined
    at DashboardComponent.execute.DashboardComponent.createLinearChart

visual-studio angular node-modules systemjs
person mihai    schedule 18.04.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я бы настроил библиотеку в SystemJS таким образом, поскольку библиотека поддерживает CommonJS:

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

Таким образом вы сможете импортировать объект Chart:

import Chart from 'chart';

(...)
var myNewChart = new Chart(...);
person Thierry Templier    schedule 18.04.2016
comment
Я установил это так: map: { 'chart': 'node_modules/chart.js/dist/Chart.js' } в моем dashboard.component.ts жалуется на import Chart from 'chart'; жалуется, что Не удается найти модуль «диаграмма» - person mihai; 18.04.2016
comment
а в консоли браузера: много GET http://localhost:3000/node_modules/chart.js/dist/charts/Chart.PolarArea 404 (Not Found) GET http://localhost:3000/chartjs-color 404 (Not Found) GET http://localhost:3000/node_modules/chart.js/dist/charts/Chart.Bar 404 (Not Found) - person mihai; 18.04.2016
comment
Это немного странно, потому что chart.js использует файлы JS (загруженные с помощью require(...)), которые не находятся в папке dist :-( - person Thierry Templier; 18.04.2016
comment
Вы можете попробовать добавить это в блок map: 'chart/charts': 'node_modules/chart.js/src/charts. Просто предположение ;-) - person Thierry Templier; 18.04.2016

arrow_upward
0
arrow_downward

После выпуска Chart.js версии 2.2.1 и Angular 2 версии RC4 можно использовать chart.js следующим образом:

//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"

Импорт из node_modules:

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

Использование в действии:

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

Подробнее о «Как использовать» см. в этом сообщении: chart.js - Предоставленные параметры не соответствуют ни одной подписи цели вызова (angular2)

person mihai    schedule 04.08.2016
comment
можно ли вообще удалить строку из index.html и поместить ее в файл systemjs.config.js? - person reza; 15.11.2017
comment
@reza, не могу на это ответить. Я переключился на веб-пакет и использую файл поставщиков для внедрения сторонних библиотек. Может быть, ответ от Тьерри вас устроит? - person mihai; 15.11.2017