Search code examples
angularsystemjs

Problems using ng-chart in angular 2


I've been using angular 2 for a week, I'm trying to install ng-charts, so I followed: https://github.com/valor-software/ng2-charts When I do npm start, it doesn't load anything and in the browser, and the console says: chart.js:4 Uncaught ReferenceError: require is not defined (index):35 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/ng2-charts/ng2-charts(…)

I've been searching for hours and I think is something related with adding it to system.config.js I added this to map: 'ng2-charts': 'node_modules/ng2-charts', And this to packages: 'ng2-chart':{main: 'ng2-charts.js', defaultExtension: 'js' }

All packages from the documentation I've read, have an index.js, but ng-charts does not, so I thought I could use ng2-charts.js

In the instructions they say "System.js bundles can be found in bundles directory of npm package or at npm cdn" But i cant find on google what to do with that bundles... nor I can find any more detailed instructions about how to install it. For things like this I usually find everything I need already answered somewhere, I don't know what it happening today, I feel really lost :( .....


Solution

  • the things I had added to map

    'ng2-charts': 'node_modules/ng2-charts',

    and to packages

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

    where all right

    but in the doc they say to import it like this: import { ChartsModule } from 'ng2-charts/ng2-charts';

    I just import it like this: import { ChartsModule } from 'ng2-charts'; I restart npm and it worked

    I think in the doc theey should say: "for all newbies, dont be such a fools and import this lines to the system.config.js"

    Now, what it make it worked and I could see a beautiful chart, was changing this src="node_modules/chart.js/src/chart.js" For this src="node_modules/chart.js/dist/Chart.bundle.js"

    when you import chart.js in the index.html

    The second one does not use the line requiere()...