angular - "Canvas is not a constructor"错误 - 将 Fabric JS 与 Angular 6 一起使用

Question

我正在开发一个最近从 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';

我在页面上放置了一个canvas元素并命名为“C”

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

然后尝试使用结构代码:

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

当 fabric 代码被执行时，它会抛出一个错误:

***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，也许这是破坏性的东西？

关于如何解决这个问题有什么想法吗？从哪里开始？

Answer 1

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

Fabric 进口为


从“织物”导入{织物}；


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

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

如果需要，您可以在此处找到直接使用 npm 模块的配置示例，或者无论如何，它将帮助 webpack 避免尝试捆绑节点依赖项。