在 Ionic 框架中使用 Chart.js 和 jQuery

Posted 2023-03-13

【中文标题】在 Ionic 框架中使用 Chart.js 和 jQuery

【英文标题】：Use Chart.js & jQuery in Ionic Framework

【发布时间】：2019-02-11 14:06:41

【问题描述】：

我们希望在 Ionic/Angular 项目中包含 Chart.js 和 jQuery。

通过npm安装后，我们尝试像往常一样引用下面的文件：

<script src="../node_modules/chart.js/dist/Chart.min.js"></script>

我们做错了什么？出于某种原因，我们还在 packages.json 中包含了一个参考：

  "scripts": 
    ...
    "chart": "../node_modules/chart.js/dist/Chart.js"

如果我们使用 CDN，它就可以工作......但是为什么我还要使用 npm 来安装东西呢？没看懂……

“@ionic-native/core”：“~4.12.0” Ionic CLI 版本 6.4.1 “离子角”：“3.9.2” 我们收到如下错误消息：

拒绝执行脚本 'http://localhost:8100/node_modules/jquery/dist/jquery.js' 因为它 MIME 类型 ('text/html') 不可执行，严格的 MIME 类型 检查已启用。

完整的错误输出：

错误：未捕获（承诺中）：ReferenceError：未定义图表 ReferenceError：图表未定义 在 UIChart.webpackJsonp.500.UIChart.initChart (http://localhost:8100/build/0.js:173:26) 在 UIChart.webpackJsonp.500.UIChart.ngAfterViewInit (http://localhost:8100/build/0.js:154:14) 在 callProviderLifecycles (http://localhost:8100/build/vendor.js:13123:18) 在 callElementProvidersLifecycles (http://localhost:8100/build/vendor.js:13090:13) 在 callLifecycleHooksChildrenFirst (http://localhost:8100/build/vendor.js:13073:29) 在 checkAndUpdateView (http://localhost:8100/build/vendor.js:14228:5) 在 callViewAction (http://localhost:8100/build/vendor.js:14570:21) 在 execComponentViewsAction (http://localhost:8100/build/vendor.js:14502:13) 在 checkAndUpdateView (http://localhost:8100/build/vendor.js:14225:5) 在 callWithDebugContext (http://localhost:8100/build/vendor.js:15473:42) 在 c (http://localhost:8100/build/polyfills.js:3:19752) 在 c (http://localhost:8100/build/polyfills.js:3:19461) 在http://localhost:8100/build/polyfills.js:3:20233 在 t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660) 在 Object.onInvokeTask (http://localhost:8100/build/vendor.js:5126:33) 在 t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581) 在 r.runTask (http://localhost:8100/build/polyfills.js:3:10834) 在 o (http://localhost:8100/build/polyfills.js:3:7894)

一位朋友建议我们可能需要安装 Browserify 或 Webpack。试试看……

【参考方案1】：

如果通过 node_modules 使用图表 js，则不需要通过 <script src=""> 包含

当您执行 ionic serve 时，您会加载 node_modules 并执行它们。

您还尝试使用npm start 而不是ionic serve 来检查是否可以解决您的问题。 让我知道进展如何。

【讨论】：

嘿伙计！尝试删除

奇怪的是，它不适用于 npm start。我很高兴现在正在工作。如果需要，可以尝试 npm 卸载图表。然后 npm 安装。然后尝试不使用 CDN 的 npm start 并查看它是否工作。

好奇怪，现在也试过了。也没有帮助。你想让我输入整个错误输出吗？

是的，请把错误输出。同时，您暂时可以使用 CDN 来完成。

在上面添加了完整的错误输出。另外，如果第一个没有帮助，我将尝试安装 Browserify 和更高版本的 Webpack。奇怪的是，我现在知道如何输入自己的 javascript 文件了。但它不会链接到 node_modules 中的 Chart.js 或 jQuery...