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

Question

我们希望在 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。试试看……

Answer 1

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

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

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