Question

我正在尝试在我的angular2应用程序中使用CanvasJS，但每当我运行我的应用程序时，我一直收到“CanvasJS未定义”的控制台错误。

我在index.html页面中包含以下内容：

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>

但我相信我可能需要在systemjs.config文件或packages.json文件中添加某种引用，但不知道如何解决此问题。

Answer 1

虽然您在技术上不需要将它映射到SystemJS配置文件中，因为脚本标记足以加载polyfill，通过将其添加到您的配置中，您可以按需加载它，确保仅在需要时加载它并在相对于您的申请的适当顺序。

您的配置可能看起来像

SystemJS.config({
  map: {
    "canvas-polyfill": "https://canvasjs.com/assets/script/canvasjs.min.js"
  },
  meta: {
    "https://canvasjs.com/assets/script/canvasjs.min.js": {
      "format": "global",
      "scriptLoad": true,
      "build": false
    }
  }
});

然后，您可以向使用画布API的任何模块添加导入，以确保在需要时加载它，而不会破坏脚本标记和隐式依赖项。

import 'canvas-polyfill';

import {Component} from '@angular/core';

// etc.

编辑：我意识到这不是一个polyfill，所以写出更好的风格

SystemJS.config({
  map: {
    "canvasjs": "https://canvasjs.com/assets/script/canvasjs.min.js"
  },
  meta: {
    "https://canvasjs.com/assets/script/canvasjs.min.js": {
      "format": "global",
      "exports": ["CanvasJS"],
      "scriptLoad": true,
      "build": false
    }
  }
});

并通过

将其导入应用程序代码中

import CanvasJS from 'canvasjs';

import {Component} from '@angular/core';

// etc.

然而，这两种方法都可以正常工作。

CanvasJS未在角度应用中定义

1 个答案: