我们可以在 Angular 8 中使用 CDN 而不是安装包吗？答案

【问题标题】：Can we use CDN in angular 8 instead of installing the package?我们可以在 Angular 8 中使用 CDN 而不是安装包吗？
【发布时间】：2022-08-22 21:36:24
【问题描述】：

我们可以使用 CDN 而不是在 Angular 8 中安装软件包吗？我正在尝试在 Angular 8 中使用 Google 图表。安装正常，但是在我为应用程序提供服务时遇到了一些错误并且编译失败。我什至补充说： \"skipLibCheck\"：真

在 tsconfig.json 文件中

错误如下：

./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 266:277-303 中的错误无法从非 EcmaScript 模块导入命名导出 \'ChangeDetectionStrategy\'（仅默认导出可用）

./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 818:18-27 中的错误无法从非 EcmaScript 模块导入命名导出“组件”（只有默认导出可用）

./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 265:28-49 中的错误无法从非 EcmaScript 模块导入命名导出 \'ɵɵngDeclareFactory\'（仅默认导出可用）

./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 307:25-49 中的错误无法从非 EcmaScript 模块导入命名导出 \'ɵɵngDeclareInjectable\'（仅默认导出可用）

./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 216:28-52 中的错误无法从非 EcmaScript 模块导入命名导出 \'ɵɵngDeclareInjectable\'（仅默认导出可用）

./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 857:26-48 中的错误无法从非 EcmaScript 模块导入命名导出 \'ɵɵngDeclareInjector\'（只有默认导出可用）

./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 848:26-48 中的错误无法从非 EcmaScript 模块导入命名导出 \'ɵɵngDeclareNgModule\'（仅默认导出可用）

./node_modules/angular-google-charts/fesm2015/angular-google-charts.mjs 693:81-83 中的错误无法从非 EcmaScript 模块导入命名空间对象（只有默认导出可用）

使用的节点和角度版本- 角 CLI：8.0.6 节点：10.9.0

我无法立即升级节点/角度。所以任何解决方法在这里都会有所帮助

你能分享你导入错误中提到的模块的文件吗？另外，您能否确认您使用的是 Angular 8 所需的正确版本的 google-charts？您可能安装了与 Angular 8 不兼容的最新版本。
@Snikhill 你能告诉我哪个是 Angular 8 的兼容版本的谷歌图表吗？

标签： node.js google-visualization angular8 cdn angular-google-chart

【解决方案1】：

我找到了解决方案。有时由于节点和角度版本的可比性问题，我们会遇到上述错误。简单的解决方案是升级节点，然后升级你的角度。但是升级不应该是唯一的解决方案，因为在许多地方我们不能只升级我们的环境，因为它可能会导致现有代码（其他用例）出现问题。一个对我有用的解决方案是，（下面的代码 sn-p 只是关于在 Angular 8 中实现谷歌图表，你必须创建一个新的 Angular 应用程序，然后将此代码粘贴到其中）

在 index.html 中为 loader.js 添加 CDN

<!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>

在 component.ts 文件中启动谷歌图表，您也可以在 drawChartFunction 中启动它：

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);
    }

注意：1.您必须根据您尝试绘制的图表更改图表名称： - 包可以是核心图表、日历、仪表，具体取决于图表的类型您可以参考Types Of charts in google charts中的不同类型图表

目前无法自定义气泡图。
x 轴和 y 轴值始终应该是气泡图的数字，因为它是 3D 图表

【讨论】：