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＆amp; angular2 world，我仍然不太清楚这里的事情是如何运作的。我看到有些人和我有同样的问题，但我不明白答案/我不能使用它们，因为我的应用程序架构是来自英雄之旅的那个，我不熟悉用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

只需将您的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>

它对我有用。希望这会有所帮助：）

Answer 2

如果使用angular cli

，请将其添加到angular-cli.json中的脚本部分

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

Answer 3

在system.config.js中，我不得不将maps.js添加到map和包中以使其运行。

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

}

Answer 4

希望这对某人有所帮助，就我个人而言，它是导入 import { ChartsModule } from 'ng2-charts'; 而不是 import { ChartsModule } from ng2-charts/ng2-charts;

Angular2＆amp; ng2-charts模块：

4 个答案: