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');

执行结构代码时，它会引发错误：

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

我不太确定这是什么意思。我花了一些时间寻找答案，尽管我确实找到了此页面，但并没有找到太多的东西：

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

关于如何解决此问题的任何想法？从哪里开始？

Answer 1

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

织物导入为

import { fabric } from 'fabric';

一般来说，关于webpack配置和结构的信息，请在此处查看：

在这里，您将找到一个配置示例，如果需要，可以直接使用npm模块，否则无论如何它将帮助webpack避免尝试捆绑节点依赖项。

Answer 2

我正在按照以下步骤将Fabric用作全局导出：

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

我希望这会有所帮助。