0

Can we use CDN instead of installing packages in angular 8. I am trying to use Google charts in angular 8. Installation goes fine but I'm getting some errors while I serve the app and compile fails. I have even added: "skipLibCheck":true

in tsconfig.json file

The errors are like:

ERROR in ./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 266:277-303 Can't import the named export 'ChangeDetectionStrategy' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 818:18-27 Can't import the named export 'Component' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 265:28-49 Can't import the named export 'ɵɵngDeclareFactory' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 307:25-49 Can't import the named export 'ɵɵngDeclareInjectable' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 216:28-52 Can't import the named export 'ɵɵngDeclareInjectable' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 857:26-48 Can't import the named export 'ɵɵngDeclareInjector' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 848:26-48 Can't import the named export 'ɵɵngDeclareNgModule' from non EcmaScript module (only default export is available)

ERROR in ./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 693:81-83 Can't import the namespace object from non EcmaScript module (only default export is available)

node and angular version used- Angular CLI: 8.0.6 Node: 10.9.0

I cannot upgrade node/angular immediately. So any workaround would be helpful here

gow_r
  • 25
  • 5
  • Can you share the file where you are importing the modules mentioned in the errors? Also, can you please verify that you are using the correct version of google-charts required for Angular 8? It is possible that you installed the latest version which may not be compatible with Angular 8. – SNikhill Aug 03 '22 at 11:10
  • @SNikhill can you please tell me which is the compatible version of google charts for angular 8? – gow_r Aug 03 '22 at 12:57

1 Answers1

0

I found a solution to this. Sometimes due to node and angular version comparability issues we get above errors. Simple solution would be to upgrade the node and then your angular. However upgrading shouldn't be the only solution, as in many places we cannot just upgrade our environment as it may cause issue with existing code(other use cases). One solution which worked for me is, (below code snippet is just about implementing google charts in angular 8 you have to create a new angular application and then paste this code in it )

Add CDN for loader.js in index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Google Chart Using CDN</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</body>

</html>

initiate the google chart in component.ts file you can initiate it inside the drawChartFunction as well:

ngOnInit() {
      google.charts.load('current', { 'packages': ['corechart'] });
      google.charts.setOnLoadCallback(this.drawChartFunction);
    }


    drawChartFunction() {
      var data = google.visualization.arrayToDataTable([
        ['Col1', 'Col2', 'Col3', 'Col4', 'Col5'],
        ['', 123, 98, 'ABC', kjhg],
        ['', 234, 876, 'xyz', kjhgfd]
      ]);

      var options = {
        title: 'Google chart example'
      }

      var chart = new google.visualization.BubbleChart(document.getElementById('<ID of DIV where chart should be plotted>'));
      chart.draw(data, options);
    }

Note: 1. You have to change the chartname as per the chart you are trying to draw: - packages can be corechart, calendar, gauge depending on the type of chart you can refer to the different types of charts in Types Of charts in google charts

  1. Customization for bubble chart is not possible as of now.
  2. x axis and y axis values are always supposed to be numbers for bubble chart as it is 3D chart
gow_r
  • 25
  • 5