Question

我是angularjs的新手（特别是棱角分明的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

Answer 1

我会以这种方式在SystemJS中配置库，因为库支持CommonJS：

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

这样您就可以导入Chart对象：

import Chart from 'chart';

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

Answer 2

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 - Supplied parameters do not match any signature of call target (angular2)

SystemJS在index.html中导入chart.js

2 个答案: