Angular2 & ng2-charts module :

Question

I just started using angular2 and i did the tour of heroes tutorial: https://angular.io/docs/ts/latest/tutorial/

I went further and did some custom code and everything is fine.

However, when i tried using the ng2-chart module, i couldn't make it to work: http://valor-software.com/ng2-charts/

i did this

npm install ng2-charts --save

and this

npm install chart.js --save

But, when importing the js to my index file, this didn't work:

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

So i had to fix it by using this:

<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

Next, is the part that is giving me so headaches:

//app.module.ts    
import {ChartsModule} from 'ng2-charts/ng2-charts'; 
...

imports: [ 
    BrowserModule,
    AppRoutingModule,
    HttpModule,
    ChartsModule,
  ],
....

I'm alway getting

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

It's good to know that if I import

import {ChartsModule} from 'node_modules/ng2-charts/ng2-charts'

my server cry

app/app.module.ts(17,31): error TS2307: Cannot find module 'node_modules/ng2-charts/ng2-charts'.

Things to keep in mind : i'm realy new to js & angular2 world, i thing that i still don't understand very well how things works here. I have seen some people having the same issue as me but i didn't understant the answers/ i can't use them since my app architecture is the one from the tour of heroes and i'm not familiar enoungh with angular2 to change it for now.

i suspect 3 problems: i should bind the "ng2-charts" to "node_modules/ng2-charts" / the path itself is wrong / the ng2-charts should be "compiled" to produce some .js file and it isn't.

Some informations that can help :

  $ 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

(And if someone can give me a link to understand how to package the tour of heroes architecture to production, it would be very nice) Thanks all

EDIT

Problem solved by adding this to my systemjs.config.js file:

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

hope it will help someone someday

Answer 1

just change your chart.js import to cdn link in index.html file as below and keep everything else as per doc.

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.bundle.min.js"></script>

it works for me. hope this will help :)

Answer 2

In system.config.js I had to add charts.js to map and packages to make it run.

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 3

add this to your scripts sections in angular-cli.json if you are using angular cli

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

Answer 4

Hope this helps someone, for me personally it was importing import { ChartsModule } from 'ng2-charts'; as opposed to import { ChartsModule } from ng2-charts/ng2-charts;