Sorry for the fragmented replies, in c3 web page it says it depends on D3 so do i need to add an import over c3 or add it in the webpack.config.js file?
Sadly no. As webpack builds out the dependancies for your app, there’s going to be code that is included that may or may not be used. Based on how libs export all of their available modules, webpack will still bundle all of those together.
This is something that has been added in webpack 2, called dead code elimination. In this case, if I imported sum form lodash, it will only include the code to make sum work and none of lodash’s other methods.
Nope. C3 and D3 will be bundled together at build time. Not extra steps needed in webpack
What about the support for the intl polyfill? this is the biggest flaw in my current app, can’t properly publish until i fix this.
Ok did fix the intl polyfill import, did it like this in the webpack.config.js
module.exports = {
entry: [
path.normalize('es6-shim/es6-shim.min'),
'reflect-metadata',
path.normalize('zone.js/dist/zone-microtask'),
'intl/index.js',
'intl/locale-data/jsonp/en.js',
path.resolve('app/app')
],
So I was upgrading my app that uses Chart.js to latest version of Ionic …
I had the same issue you are having if I include chart.js in webpack (I thought that would work, then I read Mike’s comment) or if I import it in my typescript like import * as Chart…
The error was only going away when I add the JS to the index.html file …
However, what does work is that if you modify the ng2-charts/charts.ts file and import Chart.js there …
import * as Chart from 'chart.js/Chart.min.js';
That’s cool to know, but thats just patching the library, Have you tried the same way i did with the intl polyfill? putting the charts library in the entry object in the webpack.config.js file? i think this should fix it instead of adding it to the html, it’s not modular but we lack other options.
I tried adding it in webpack but that did not work for some reason. The code was included in app.bundle.js but I still got errors saying its undefined.
Tried to change the order its included, didn’t make a difference.
I think that the error lies in the library trying to reach a global scoped variable instead of the local scope, however does it work in device if you just include it in the index.html? i tough that’s the reason we use webpack, because it bundles the dependencies with the code in 1 file that cordova then puts in the apk file, have you tried your way in device?
Just to make sure, you are still having the chart.min.js at the same place is your index.html, right?
It is working for me too, just not really “clean”.
Yes it works on device if I include it in index.html. But I ended up importing it in my TypeScript file instead so it gets compiled in the bundle.js
Yes I used to have it in the www directory. But now I import it from chart.ts and it works fine.
would you mind to tell me which file and how? Thanks
add import * as Chart from 'chart.js/Chart.min.js'; to chart.ts located in node_modules/ng2-charts
How did you solve that error?
ERROR in [default] …/node_modules/ng2-charts/components/charts/charts.ts:8:23
Cannot find module ‘chart.js/Chart.min.js’.
Also, do you still need to add
<script src="Chart.min.js"></script>
in index.html?
Even if you have chart.js installed in your node_modules you will get the error while compiling the TypeScript but it does not affect the performance of the app. No you do not need to add the file to index.html any longer. You can get rid of the Chart.min.js file as well…
Due to that TypeScript compiler error/warning I believe this might not be the best way to get this to work out… But it does the job … It gets Chart.min.js compiled in the main bundle file.
When opening the page containing the chart, I get the same error that @luchillo17 got.
ReferenceError: Chart is not defined in [_chartOptions in DashboardPage@62:11]
For sure, I am missing something, right?
Yeah that error occurs when Chart.min.js isn’t available…
Hmm … maybe it’s because your ng2-charts is inside node_modules. My chart.ts file is included with the rest of my app files … Try doing that?
I tried to put chart.ts directly in app directory and also, I tried to put it inside the directory where my .ts file calls for it. Both did not work.
Does you sample here reflect what you are trying to tell me? If so, I will try to see what I am doing wrong.
By the way, have you seen that from chart.js?
The new way look simpler and probably won’t need ng2-charts, don’t you think?