Ng2-charts: ChartsModule export issue with Ionic RC0

[swapna-devadict]

Reproduction of the problem

I have a Ionic app (RC0) and updated with ng2-charts version 1.3.0, after compiling the app getting below error.

Error: Module c:\Test\node_modules\ng2-charts\ng2-charts.js does not export ChartsModule (imported by c:\Test\.tmp\app\app.module.js) at Module.trace (c:\Test\node_modules\rollup\dist\rollup.js:7677:29) at ModuleScope.findDeclaration (c:\Test\node_modules\rollup\dist\rollup.js:7300:22) at Scope.findDeclaration (c:\Test\node_modules\rollup\dist\rollup.js:5351:39) at Identifier.bind (c:\Test\node_modules\rollup\dist\rollup.js:6489:29) at c:\Test\node_modules\rollup\dist\rollup.js:5151:50 at ArrayExpression.eachChild (c:\Test\node_modules\rollup\dist\rollup.js:5165:19) at ArrayExpression.bind (c:\Test\node_modules\rollup\dist\rollup.js:5151:7) at c:\Test\node_modules\rollup\dist\rollup.js:5151:50 at Node.eachChild (c:\Test\node_modules\rollup\dist\rollup.js:5168:5) at Node.bind (c:\Test\node_modules\rollup\dist\rollup.js:5151:7)

Thanks in advance.

[sjaanus]

I have run into same problem.

[TomDemulierChevret]

Hi,

I've run into the same issue and managed to work around it by replacing :

import {ChartsModule} from "ng2-charts";

with

import {ChartsModule} from "ng2-charts/components/charts/charts";

If you struggle to include the chart.js (or chart.bundle.js) into the index.html because of Ionic RC0 new build system, please read : https://forum.ionicframework.com/t/rc0-injecting-custom-scripts/65281/4 & https://www.npmjs.com/package/@ionic/app-scripts

[rafaelss95]

I have the same problem and the above solution didn't work for me.

Edit: It worked for me. Thanks @TomDemulierChevret

[sjaanus]

TomDemulierChevret solution worked for me.

[iamyojimbo]

You need to make sure you have the latest version installed. Just try removing your package.json

[danbucholtz]

Dan from Ionic here. We're going to provide some instructions to Angular library creators (and really any library creators) on how to distribute their dist directory with commonjs modules AND es2015 modules and link them up in the package.json using the main and module fields.

Once this library follows the Angular convention, everything will just work.

Expect that in the coming week or so.

Thanks,
Dan

[larssn]

@danbucholtz Can you hint at how to do that, for those of us that are familiar with the build system already? Also, I don't believe the module field for package.json is documented?

[magicfa]

have you tried to put it into rollup.config.js located in node_modules/@ionic/app-scripts/config

I did it with firebase and angularfire and that works well

/**

• plugins: Array of plugin objects, or a single plugin object.
• See https://github.com/rollup/rollup/wiki/Plugins for more info.
  _/
  plugins: [
  ngTemplate(),
  commonjs({
  include: [
  'node_modules/rxjs/__',
  'node_modules/firebase/__',
  'node_modules/angularfire2/__',
  'node_modules/@ionic/storage/__',
  'node_modules/localforage/_*'
  ],
  namedExports: {
  'node_modules/firebase/firebase.js': ['initializeApp', 'auth', 'database'],
  'node_modules/angularfire2/node_modules/firebase/firebase-browser.js': ['initializeApp', 'auth', 'database']
  }
  }),

[victorcarvalhosp]

@danbucholtz any news on this?

Thanks!

[swapna-devadict]

I directly moved chart.js files like below and made some code changes it started working.

<canvas baseChart class="chart" [datasets]="orderSummaryChartData" [labels]="orderSummaryChartLabels" [chartType]="doughnutChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)" [colors]="colors"> </canvas>