RC0 How to export Components and other features properly

Ionic Framework ionic-v3
1

Hi there,

In my app.modules page I was attempting to import my features like this:

import {ChartComponent, Chart} from 'ng2-chartjs2';

...
...
declarations [
..
ChartComponent 
]

With my TS file importing ChartComponent and Chart which is shown below:

export * from './components/chart.component';

However I kept getting an error that “index.js does not export ChartComponent” and for the life of me I could not figure out why this error was occurring. Is exporting * not the way to export features now? If not what is the correct way?

I ended up directly exporting my chart.component file in my app.module page and that is currently working.

Thank you

2 Likes
2

I see this too. Could you explain little more on how you could manage to work around. I am also getting the error in controller “Cannot find name ‘Chart’”

3

Just figured out how to get this going. I am putting what I did if someone struggling to get this working like me.

  1. Include Chart.js in your index.html. Make sure you add it above the “build/main.js”.
  2. Install the ng2-chartjs2 directive
  3. import is directly into ap.module.ts file
    import {ChartComponent, Chart} from ‘ng2-chartjs2/components/chart.component’;
  4. Include ChartComponent in the declarations array in app.module.ts.
  5. Import the directive in your page ts file
    import {ChartComponent, Chart} from ‘ng2-chartjs2/components/chart.component’;

This should get you going. Hope it helps someone and saves them some time.

1 Like
4

Yeah thank you for clarifying the steps - that is exactly how I got mine working earlier.

However my question was how to get the export function working when linking multiple features

Was the export * from statement below deprecated?

export * from '*FileLink*;

5

There is something not right with using * as importing lodash also was not working with *.Not sure if this is same issue.

I do wonder now how can I redraw the chart with new data. Any idea?

6

Yeah I linked a response from SO asking a similar question.

And about lodash - I have seen a few people say that their third party packages were giving them issues. While this solution worked for our package, it is far from a clean solution when packages are split up between many different files. I am just not aware what the proper way to link multiple files is now.

7

So my solution seemed to be working for simple tests when I was using ionic serve. However when I tried to build my application I am getting this error:

“ngc error: Error: Unexpected value ‘ChartComponent’ declared by the module ‘AppModule’”.

Are you getting this error?

1 Like
8

I’m getting the same issue.

9

I also just posted another topic similar to this one. I’ve been struggling with this for many hours. Basically no matter what I seem to do I can’t include ChartModule in app.modules.ts because I get the following error:
ng2-charts.js does not export ChartsModule

10

the problem seems to be there is no .metadata.json file.

check this out: https://github.com/angular/angular/issues/11262

i opened an issue here: https://github.com/zyramedia/ng2-chartjs2/issues/7

1 Like
11

for what its worth and for those interested, i got chart.js working by itself, this is what i did:

1: - install chart.js via npm:

npm install chart.js --save

2: - in your .ts file import chart.js, declare and import viewchild and elementref:

import 'chart.js/src/chart'; declare var Chart; import { Component, ViewChild, ElementRef } from '@angular/core';

3: - add the viewchild

export class YourChartsPage { @ViewChild('canvas') canvas:ElementRef;

4: - add your chart code:

ionViewDidEnter(){ let ctx = this.canvas.nativeElement new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } });

5: add the chart to your html file:

<canvas #canvas></canvas>

you can style it with css

Works with serve and just built it for android and works too and no errors! So instead of looking for a solution or waiting for a fix… just do this and have chart.js working again :slight_smile:

7 Likes
12

Good write up, thank you for doing that. I am sure it will help a lot of people. After working on this last night I ended up hacking it together using NgModule to export the components and then I was able to import it in to my app.module and run successfully.

1 Like
13

Good news guys

My issue on GitHub was just closed and aot support has been added!

14

nice @fishgrind wondering whether I should use ng2-charts now? By the way charts canvas looks very small in portrait mode. image

15

Do you have any problems updating data?

16

Hey! Thanks for this workaround, have you tried it with RC3? it seems not to work any more.

17

Ok, here what i’ve done with ng2-charts.

1.- npm install ng2-charts --save
2.- npm install chart.js --save
3.- in your app.module:
import ‘…/…/node_modules/chart.js/dist/Chart.min.js’; <== (https://github.com/valor-software/ng2-charts/issues/503)
import { ChartsModule } from ‘ng2-charts/ng2-charts’;
4.- Set your .ts and .html following this: http://valor-software.com/ng2-charts/ (line chart for example)

I don’t know if this is the best way. But, it just works fine with RC3.

Improves are always welcome :wink:

18

i just upgraded to rc3 and it works fine. I dide remove my node_modules folder and ran npm install after that

19

It works perfect on my browser. However when building for Android I keep getting the following error:
Error: Unexpected value 'ChartsModule' imported by the module 'AppModule'

20

Did you manage to get this working? I’d used a different approach and that works fine in the browser but not in ios or android. No error message either when debugging in xcode. I’m going to see if this approach works. If you already have it working can you please post your code? If not, I will if I get it working.