RC0 How to export Components and other features properly

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*;

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?

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.

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

I’m getting the same issue.

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

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

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

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

Good news guys

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

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

Do you have any problems updating data?

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

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:

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

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'

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.

thanks #fishgrind
worked for me…

but can we change values on X axis … as it is starting from 0 or 2 ,how can we make it 100 or 10.

Glad it did.

Check the chart.js documentation.

I think it’s in the scales config settings.

okkk thanks…

let me try…