“画布不是构造函数”错误 - 使用带有 Angular 6 的 FabricJS答案

【问题标题】："Canvas is not a constructor" error - Using FabricJS w/ Angular 6“画布不是构造函数”错误 - 使用带有 Angular 6 的 FabricJS
【发布时间】：2018-12-15 05:06:32
【问题描述】：

我正在处理一个最近从 Angular 5 升级到 6 的项目。我正在添加一个新功能，该功能需要我从数据中绘制图像，所以我一直在尝试使用 Canvas 和 SVG DOM 对象来做这。 FabricJS 有很多我需要的功能。

我昨晚尝试将其添加到项目中。我从网站 v2.3.3 下载了 FabricJS 的完整 DEV/MIN 版本。然后我在我的 node_modules 文件夹中创建了一个“fabric”文件夹并将 *.js 文件放在那里。我编辑了我的 angular.json 文件以包含以下内容：

    "scripts": [
      "node_modules/fabric/fabric.js"
    ]

然后用这个创建一个 typings.d.ts 文件：

declare const fabric: any;

最后，在我的模块中，我这样导入它：

import * as fabric from 'fabric';

我在页面上放了一个画布元素并将其命名为“C”

<canvas id="c"></canvas>

然后尝试使用fabric代码：

        // create a wrapper around native canvas element (with id="c")
        const canvas = new fabric.Canvas('c');

当结构代码被执行时，它会抛出一个错误：

***ERROR TypeError: fabric__WEBPACK_IMPORTED_MODULE_2__.Canvas is not a constructor
at SafeSubscriber._next***

我不太确定这意味着什么。我花了一些时间寻找答案，但没有找到太多答案，尽管我确实找到了这个页面：

Fabric.js with Typescript and Webpack: Canvas is not a constructor

这听起来很像我的问题，但我对 Angular 还是很陌生，并不总是了解发生了什么。在那篇文章中，他们讨论了对 webpack.mix.js 文件进行更改。但是我没有这样的文件，而且我知道 Angular 6 有一个新版本的 WebPack，也许这是破坏性的？

关于如何解决这个问题的任何想法？甚至从哪里开始？

【问题讨论】：

你确实有webpack.config.js，对吧？只需添加答案中的规则并将您的导入语句更改为import fabric from 'fabric'。
不，我不知道。 Angular 6 在 CLI 中“内置”了 WebPack，以尝试阻止像我这样的新手弄乱有效的方法。我看到一些页面提到了它是如何完成的（ng-eject，但另一篇文章说现在已经删除了），但是也有很多关于这将如何改变构建过程的警告，如果你不知道什么就不要这样做你在做。我属于后者。

标签： angular typescript canvas webpack fabricjs

【解决方案1】：

所以首先要检查的是 import 语句。

面料导入为

import { fabric } from 'fabric';

关于 webpack 配置和结构的一般情况，请看这里：

https://github.com/fabricjs/fabricjs-webpack

在这里你会找到一个配置示例，如果需要，可以直接使用 npm 模块，或者无论如何这将有助于 webpack 避免尝试捆绑节点依赖项。

【讨论】：

感谢您的提示。看到这一点我非常兴奋，但它似乎仍然是一个基于 webpack.config 的解决方案，Angular 6 根本没有，并且经过专门修改以“做自己的事情”。他们曾经在 Ang5 中有一个功能，允许您“弹出”然后根据自己的需要修改 webpack，但该功能在 6 中被删除，据我所知，没有其他选项可以替代它。 :(

【解决方案2】：

我按照以下步骤使用 fabric 作为全局导出：

运行npm install fabric
添加到脚本：["node_modules/fabric/dist/fabric.js"]
将其添加到 typings.d.ts：declare const fabric: any;
不要导入，直接使用：const canvas = new fabric.Canvas('c');
利润

我认为最后一部分是您缺少的部分，如果您将库添加到 Angular 脚本中，那么您不必导入它，否则您将拥有该库的 2 个不同副本，如果您想使用它作为一个模块，那么你不应该将它添加到脚本数组中。更多信息：https://github.com/angular/angular-cli/wiki/stories-global-scripts#using-global-libraries-inside-your-app

我希望这会有所帮助。

【讨论】：