Ng2-charts: Can't install it

[markm1992]

I constantly get ng2-charts ng2-charts has no exported member 'CHART_DIRECTIVES'

import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';

I've tried almost everything getting it to work, and it just doesn't. I've tried a lot of different imports and even ended up referencing the chartjs bundle instead of chartjs itself and try to work more with chartjs.

Here is relevant portions of my systemjs.config.js

paths: {
                          // paths serve as alias
                          'npm:': 'node_modules/',
                          "ng2-charts/ng2-charts": "node_modules/ng2-charts/ng2-charts"
                      },
 packages: {
                          app: {
                              main: './main.js',
                              defaultExtension: 'js'
                          },
                          rxjs: {
                              defaultExtension: 'js'
                          },
                          "node_modules/ng2-charts": {
                            format: 'register',
                            defaultExtension: 'js'
                          },
                          'angular2-in-memory-web-api': {
                              main: './index.js',
                              defaultExtension: 'js'
                          },
                          '@ng-bootstrap/ng-bootstrap':
                          {
                              main: 'index.js',
                              defaultExtension: 'js'
                          },

                          'angular2-fontawesome':
                          {
                              defaultExtension: 'js'
                          }

I've googled this issue and a lot of people have it but it doesn't seem like they have solved it.

[paulo-santos]

Since angular2 RC5 there are no more directives. Take a look at ng2-charts README:

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

// In your App's module:
imports: [
   ChartsModule
]

[markm1992]

I did this, but then I get an error when running saying it can't find the base something..

Sorry I'm not at my computer ATM. I can post specifically what happens after that (I can in 2hr). But is there an example or anything else I have to do after I've imported it?

[paulo-santos]

which version of angular are you using?
Angular 2 Final has already been released. If you are using an hold RC version, this tutorial might be useful https://angular.io/docs/ts/latest/cookbook/rc4-to-rc5.html

After that it should work.

[markm1992]

I'm using RC6
So when I do that, and import {ChartsModule}...
I then get a require is not defined error after it's running.
If I remove it from the ngmodule imports, then it once again runs.
But the app doesn't work because I get a template parse error with unknown properties of base-charts, which is expected.

So something happens when adding ChartsModule to the imports that causes a require is not defined error.
Any ideas?

_EDIT_
I also installed in on Windows using npm... so maybe the npm version of chart.js or ng2-charts is old?

[jbgarr]

@markm1992 The issue you're seeing may be related to the script tag you're using to reference chart.js in your index.html file. Instead of the script tag that the ng2-charts readme says to use to import chart.js use the following:
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>

Also as an FYI, I'm using chart.js v2.2.1, ng2-charts v1.2.0 and the newly released Angular 2 final.

[markm1992]

I tried the min script, didn't work. I also tried referencing the ng2-charts/bundles/ng2-charts but that didn't work. I'm using charts 1.2 and chart.js 2.2 as well.

I'm still getting a require not defined, and it's impossible for me to find out where that is happening as it just shows line 21, which is this line...
System.import('app').catch(function(err){ console.error(err); });

Is there possibly some typings I need to install beforehand? Or is there a require in one of the files that I should change to an import?

[markm1992]

It's in this script... ng2-charts.js

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(require('./components/charts/charts'));

I get a require not defined. And I also just tried installing the chart typings but it still didn't work. I also tried changing this to import but then I received an unknown token import.

If I remove format: 'register', from the systemjs.config.js file
Then I get this....
`zone.js:344 Unhandled Promise rejection: Template parse errors:
Can't bind to 'series' since it isn't a known property of 'base-chart'.

1. If 'base-chart' is an Angular component and it has 'series' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
   ("
   [labels]="barChartLabels"
   [options]="barChartOptions"
   [ERROR ->][series]="barChartSeries"
   [legend]="barChartLegend"
   [chartType]="barChartType"): BarChartComponent@4:11 ; Zone: ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
   Can't bind to 'series' since it isn't a known property of 'base-chart'.
3. If 'base-chart' is an Angular component and it has 'series' input, then verify that it is part of this module.
4. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
   ("
   [labels]="barChartLabels"
   [options]="barChartOptions"
   [ERROR ->][series]="barChartSeries"
   [legend]="barChartLegend"
   [chartType]="barChartType"): BarChartComponent@4:11
   at TemplateParser.parse (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:8525:21)
   at RuntimeCompiler._compileTemplate (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16879:53)
   at eval (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16802:85)
   at Set.forEach (native)
   at compile (http://localhost:3000/node_modules/@angular/compiler/bundles/compiler.umd.js:16802:49)
   at ZoneDelegate.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:192:28)
   at Zone.run (http://localhost:3000/node_modules/zone.js/dist/zone.js:85:43)
   at http://localhost:3000/node_modules/zone.js/dist/zone.js:451:57
   at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:225:37)
   at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:125:47)`

[markm1992]

If I remove series, I get this.

[markm1992]

I fixed it... 7 hours of troubleshooting!!!... I had the wrong demo from the github after the last step and instead I changed it to use the demo from
http://valor-software.com/ng2-charts/

So the final steps----
systemjs.config.js
paths: { // paths serve as alias 'npm:': 'node_modules/', "ng2-charts/ng2-charts": "node_modules/ng2-charts/ng2-charts" }, //// AND IN THE PACKAGES "node_modules/ng2-charts": { defaultExtension: 'js' },

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

And then just make sure you do the import chart modules that is listed in the readme and use the right demos to get started

[jbgarr]

Ouch, glad you got it sorted out finally though!

[hope4555]

for me this worked:

in: systemjs.config.js

add this in map section:
"ng2-charts": "npm:ng2-charts",
"chart.js": "npm:chart.js/dist/Chart.min.js",

add this in packages section

"ng2-charts": {
defaultExtension: 'js' ,
main:'./index.js'
},
"chart.js":{
defaultExtension: 'js' ,
},

[mostafiz57]

Thanks @hope4555 , I have change some things , I do the following change . It is working for me .

map:{
"ng2-charts": "ng2-charts",
"chart.js": "chart.js/dist/Chart.min"
},
packages: {
"ng2-charts": {
defaultExtension: 'js' ,
main:'./index.js'
},
"chart.js":{
defaultExtension: 'js'
}
}