Can we use CDN in angular 8 instead of installing the package?

Question

Can we use CDN in angular 8 instead of installing the package?

601 views Asked by gow_r At 03 August 2022 at 11:04

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

Original Q&A

There are 1 answers

**gow_r** · Answer 1 · 2022-08-22T13:36:24+00:00

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

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

TechQA.

Can we use CDN in angular 8 instead of installing the package?

There are 1 answers

Add CDN for loader.js in index.html

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

Related Questions in NODE.JS

Related Questions in GOOGLE-VISUALIZATION

Related Questions in ANGULAR8

Related Questions in CDN

Related Questions in ANGULAR-GOOGLE-CHART

Popular Questions

Popular Tags

Trending Questions