Angular2 &ng2-图表模块：

Question

我刚刚开始使用angular2，我做了英雄之旅教程：https://angular.io/docs/ts/latest/tutorial/

我走得更远，做了一些自定义代码，一切都很好。

但是，当我尝试使用ng2-chart模块时，我无法正常工作：http://valor-software.com/ng2-charts/

这是我做的

npm install ng2-charts --save

还有这个

npm install chart.js --save

但是，当将js导入到我的索引文件时，这不起作用：

<script src="node_modules/chart.js/src/chart.js"></script>

因此，我不得不使用以下命令来修复它：

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

接下来，是让我如此头疼的部分：

//app.module.ts    
import {ChartsModule} from 'ng2-charts/ng2-charts'; 
...

imports: [ 
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    ChartsModule,
  ],
....

我总是得到

GET localhost:3000/ng2-charts/ng2-charts 404 (Not Found)
Error: (SystemJS) XHR error (404 Not Found) loading localhost:3000/ng2-charts/ng2-charts
    Error: XHR error (404 Not Found) loading localhost:3000/ng2-charts/ng2-charts
        at XMLHttpRequest.wrapFn [as _onreadystatecha

很高兴知道如果我导入

import {ChartsModule} from 'node_modules/ng2-charts/ng2-charts'

我的服务器哭了

app/app.module.ts(17,31): error TS2307: Cannot find module 'node_modules/ng2-charts/ng2-charts'.

要记住的事情:我是js & angular2世界的新手，我想我仍然不是很好地理解这里的事情是如何工作的。我见过一些人和我有同样的问题，但我不理解答案/我不能使用他们，因为我的应用程序架构是英雄之旅中的架构，我还不够熟悉angular2来改变它。

我怀疑有3个问题:我应该将" ng2-charts“绑定到"node_modules/ng2-charts”/路径本身是错误的/ng2-charts应该被“编译”以生成一些.js文件，但它并没有。

以下是一些对您有帮助的信息：

  $ npm -v
    3.10.9
    $ tsc -v
    message TS6029: Version 1.5.3
    $ ng -v
    angular-cli: 1.0.0-beta.24
    node: 6.9.2
    os: win32 x64
    @angular/common: 2.4.2
    @angular/compiler: 2.4.2
    @angular/core: 2.4.2
    @angular/forms: 2.4.2
    @angular/http: 2.4.2
    @angular/platform-browser: 2.4.2
    @angular/platform-browser-dynamic: 2.4.2
    @angular/router: 3.4.2

(如果有人能给我一个链接，让我了解如何将英雄架构之旅打包到产品中，那就太好了)谢谢大家

EDIT

通过将以下内容添加到我的systemjs.config.js文件中解决了问题：

map: {
      'ng2-charts': 'node_modules/ng2-charts',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      "node_modules/ng2-charts": {
        defaultExtension: 'js' 
      }
    }

希望有一天能帮助到别人

Answer 1

只需在index.html文件中将您的chart.js导入更改为cdn链接，如下所示，并保留其他所有内容。

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>

这对我很有效。希望这能有所帮助:)

Answer 2

如果您使用的是angular cli，请将此代码添加到angular-cli.json中的脚本部分

  "../node_modules/chart.js/dist/Chart.bundle.min.js"

Answer 3

在system.config.js中，我必须将charts.js添加到地图和包中才能使其运行。

map: {
  'ng2-charts': 'npm:ng2-charts',
  'chart.js': 'npm:chart.js/dist/Chart.min.js',
},
packages: {
  'ng2-charts': {
    main: './index.js',
    defaultExtension: 'js'
  },
  'chart.js': {
    defaultExtension: 'js',
  }

}