使用npm angular2导入库

我无法使用npm来设置这个库 。

完成的命令：

npm install ng2-charts --save npm install chart.js --save 

的index.html

我添加了这一行

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

app.module

  import { ChartsModule } from 'ng2-charts/ng2-charts'; @NgModule({ imports: [ BrowserModule, RouterModule.forRoot(router), HttpModule, ChartsModule, ], 

systemjs.config.js

 (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder 'app': 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 'chartJS': 'npm:ng2-charts' }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { defaultExtension: 'js', meta: { './*.js': { loader: 'systemjs-angular-loader.js' } } }, chartJS:{ defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' } } }); })(this); 

我的控制台

这个localhost:3005/ng2-charts/ng2-charts内容实际上是一个HTML文件 – 它指的是我的index.html 。

我无法理解它现在几个小时的工作情况。

Answer 1

你的system.jsconfiguration应该是，

  map: { 'chart.js': 'npm:chart.js/dist/Chart.bundle.min.js', 'ng2-charts': 'npm:ng2-charts' } 

在包装中，

  'ng2-charts': { main: 'ng2-charts.js', defaultExtension: 'js' }