我刚开始使用angular2,我做了英雄之旅教程:https://angular.io/docs/ts/latest/tutorial/
我更进一步,做了一些自定义代码,一切都很好。
然而,当我尝试使用ng2图表模块时,我无法使其工作: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图表"绑定到"node_modules/ng2图表"/路径本身是错误的/应该"编译"ng2图表以生成一些.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'
}
}
希望有一天它能帮助别人
只需将您的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>
它对我有用。希望这会有所帮助:)
如果使用angular cli ,请将其添加到angular-cli.json中的脚本部分
"../node_modules/chart.js/dist/Chart.bundle.min.js"
在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',
}
}
希望这能帮助到别人,对我个人来说,这是导入import { ChartsModule } from 'ng2-charts';
而不是import { ChartsModule } from ng2-charts/ng2-charts;