javascript - 在 Aurelia 中使用 Chart.js

Question

我想在 aurelia 项目中使用 chart.js，但出现错误。如何将第 3 方节点包添加到 aurelia 应用程序？

顺便说一句，我正在使用 aurelia-cli

这是我做的

npm install --save chart.js

在 aurelia.json 中，我添加了以下内容

"dependencies": [
  ...,
  {
    "name": "chart.js",
    "path": "../node_modules/chart.js/dist",
    "main": "Chart.min.js"
  }
]

然后在 app.html 中添加一行

<require from="chart.js"></require>

但是，我得到了错误:

vendor-bundle.js:1399 Unhandled rejection Error: Load timeout for modules: template-registry-entry!chart.html,text!chart.html

我尝试了各种方法，比如将图表注入(inject) app.html

// DIDN'T WORK :-(
// app.js
import {inject} from 'aurelia-framework';
import {Chart} from 'chart.js';

export class App {

  static inject() { return [Chart]};

  constructor() {
    this.message = 'Hello World!';
  }
}

然后，在 app.html 中，我添加了以下 require 语句

<require from="Chart"></require>

---

解决方案

您可以查看一个工作示例 here .最初，我以为你必须使用 aurelia-chart 模块，但是，它很难使用，所以我建议你只使用 Chart.JS 包反而。以下是将 chart.js 模块合并到您的 Aurelia 应用程序中的方法:

npm install --save chart.js

在 aurelia.json 中，将以下行添加到 prepend 部分

"prepend": [
  ...,
  "node_modules/chart.js/dist/Chart.min.js"
],

在 app.js 文件(或任何其他模型 View 文件)中，添加行

import {Chart} from 'node_modules/chart.js/dist/Chart.js';

例如，如果您想在主页上显示图表:

// app.js
import {Chart} from 'node_modules/chart.js/dist/Chart.js';

export class App {
  ...
}

就是这样!

Answer 1

<强>1。要求问题

首先，不要使用<require from="Chart"></require>在你的 app.html 项目中。这是错误消息的来源，因为它正在尝试加载 Aurelia 模块，而 chart.js 不是源代码中的 Aurelia 模块( View / View 模型)。

<强>2。备用导入语法

跳过inject app.js 中的行, 但在 app.js 中尝试以下一个(一次尝试一个)或者在每个模块中，您将使用 Chart。这些导入之一可能会起作用。

import { Chart } from 'chart.js';
import * from 'chart.js';
import 'chart.js';

<强>3。遗留前缀

如果以上方法均无效，请使用 prepend 将其作为遗留存储库导入节aurelia.json (在 dependencies 部分之前)像这样:

"prepend": [
  // probably a couple other things already listed here...
  "node_modules/chart.js/dist/Chart.min.js"
],

Aurelia-Chart 更新:(为以后的查看者添加)

由于您最终使用了 aurelia-chart(由 grofit)，这里是 aurelia.json 的依赖代码:

"dependencies": [
  ...,
  {
    "name": "chart.js",
    "path": "../node_modules/chart.js/dist",
    "main": "Chart.min.js"
  },
  {
    "name": "aurelia-chart",
    "path": "../node_modules/aurelia-chart/dist/amd",
    "main": "index",
    "deps": ["chart.js"]
  }
]