使用npm導入庫angular2

Question

我無法使用npm設置this library。

命令來完成：

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.js配置應該是，

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

和包裝，

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