Angular2 和 ng2-charts 模块:



我刚开始使用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;

相关内容

  • 没有找到相关文章

最新更新