javascript - Angular2 和 ng2-charts 模块 :

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”绑定(bind)到“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

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

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

这对我有用。希望这会有所帮助:)